css - 親の左側と同じ高さから1ピクセル離れた子div

Question

親divとその中に子divがあります（子divはポップアップメニューとして機能します）。子divがポップアップすると、親divの左側に整列しないように、小さなスペースがあります。

スタイルは次のとおりです。

.ButtonContent
{
    display:none;
    border: solid 1px black;
    width:275px;
    position:absolute;
    left:0;
    margin:0px;
    padding:0px;
    float:left;
    background-color:#FFF;
    border-radius:0 0 4px 4px;
}
.Button
{
    margin:0px;
    padding:0px;
    border: solid 1px black;
    border-radius:4px 4px 4px 4px; 
    width:276px;
    text-align:center;
    position:relative;
}

HTMLは次のとおりです。

<div class="Button" id="Button1" >
    Add <br />
    <div class="ButtonContent" id="ButtonContent1">
         Date purchased:
         <div class="Date" id="datePurchased1"></div><br/>
         Purchase Location:<br />
         <input type="text" maxlength="150" /><br />
         <a>Add</a>
    </div>
</div>

score 2 · Accepted Answer

境界線のある比較的配置された要素の内側に絶対的に配置された要素があるため、境界線内に配置すると、ピクセル単位で見えなくなります。left:0

クイックフィックス：両方を同じ幅にして、left:-1px;代わりに使用します。

http://jsfiddle.net/RtGfc/

私には、必要な外観を実現するためにこのCSSをすべて必要としないように見えます。おそらく、より良い修正（HTMLに触れることなく）です。

.ButtonContent
{
    border-top: solid 1px black;
    background-color:#FFF;
    border-radius:0 0 4px 4px;
}
.Button
{
    border: solid 1px black;
    border-radius:4px; 
    width:275px;
    text-align:center;
}

http://jsfiddle.net/RtGfc/1/