※ ChatGPTを利用し、要約された質問です（原文：ボーダースタイルがうまく表示できない）
このQ&Aのポイント
クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。
問題はボックスの幅が設定されている525pxであることです。
ボックスの幅を調整することでボーダーが正しく表示されるようになります。
#content {
width:525px;
}
div.box {
width:525px;
margin-top: 20px;
border-bottom:dotted 1px #ccc;
}
div.left {
width:140px;
float: left;
font-weight: bold;
margin-left: 5px;
}
div.right {
width:380px;
float: left;
line-height: 20px;
height: 20px;
}
<div id="content">
<div class="box">
<div class="left">Address</div>
<div class="right">住所<br>東京都</div>
</div>
</div>
クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。
どこが間違っておりますか？
アドバイスを宜しくお願いします。
お礼
overflow:hidden;で解決できました。
補足
アドバイスをありがとうございます。 div.box 内に色々なクリアーを付けてみましたが、変わりませんでした。どこが違うのでしょうか…？