趣味は車輪の再発明♪

DIVのサイズとボーダーの関係



DIVを使ってレイアウトを組むことが多いと思うのですが、「ここのDIVに太目のボーダーを付けましょう」となったとたん、絶望的にレイアウトが崩れたりします。大き目のページで適当にやっていると大変なことになりますし、DIVを動的にガリガリ生成してたりするともう・・・。

ということで、調査結果を書いておきます。


枠の太さ(border-width)と幅(width)の関係

通常、DIVの枠線は外側に付きます。単一のDIVに幅を指定して枠を付けると、見た目には枠の幅分だけサイズが太ります。

幅に関してだけですが、枠線を内側に付けるには、DIVを入れ子にして、外側のDIVに幅を指定し、内側のDIVに枠線を指定します(以下のサンプル)。

3つともサイズの指定は同じで、枠線の幅(border-width)は上から順に1px,20px,50pxとしていますが、3つのボックスの幅は同じ。つまり左右の枠線は、矩形の内側にあることがわかりますね。

border-width:1px;
border-width:20px;
border-width:50px;

ただし、上下の枠線は外側についていて、DIVの見た目の高さに影響しちゃっています。

ちなみに、cssで幅を指定していますが、DIVのstyle属性でやっても同じです。

css

.outer {
  width:100%;
  margin:5px 0;
}
.outer > div {
  border-style:solid;
}
.rect1 > div { border-color:black; }
.rect2 > div { border-color:gray; }
.rect3 > div { border-color:silver; }

html

<div class="outer rect1">
  <div style="border-width:1px;">
    border-width:1px;
  </div>
</div>
<div class="outer rect2">
  <div style="border-width:20px;">
    border-width:20px;
  </div>
</div>
<div class="outer rect3">
  <div style="border-width:50px;">
    border-width:50px;
  </div>
</div>

枠の太さ(border-width)と高さ(height)の関係

残念ながら、上下の枠線を内側に入れる方法はわかりませんでした。できないのかもしれません。

以下のサンプルでは、内側DIVの高さに、外側DIVの高さから上下の枠線の幅を引いた値を設定しています。

border-width:1px;
height:198px;
/*=200-(1*2)*/
border-width:20px;
height:160px
/*=200-(20*2)*/
border-width:50px;
height:100px
/*=200-(50*2)*/

html

<div class="outer rect1"
style="float:left;width:235px;height:200px; margin:5px 5px 5px 0;">
  <div style="border-width:1px; height:198px;">
    border-width:1px;<br/>
    height:198px;<br/>
    /*=200-(1*2)*/
    </div>
</div>
<div class="outer rect2"
style="float:left;width:235px;height:200px; margin:5px;">
  <div style="border-width:20px; height:160px;">
    border-width:20px;<br/>
    height:160px<br/>
    /*=200-(20*2)*/
  </div>
</div>
<div class="outer rect3"
style="float:left;width:235px;height:200px; margin:5px 0 5px 5px;">
  <div style="border-width:50px; height:100px;">
    border-width:50px;<br/>
    height:100px<br/>
    /*=200-(50*2)*/
  </div>
</div>


RSS Feed Widget
DIVのサイズとボーダーの関係
(http://bicycle.life.coocan.jp/takamints/index.php/techtips/divSize)
by Koji Takami ( email: vzg03566@gmail.com, GitHub: takamin )