box-sizing

問題

外框框線不算在外框尺寸之內,所以整個框框比預期來得大

原因

box-sizing: content-box→預設,外框框線在框元素之外。
box-sizing: border-box→外框框線包在框元素之內。

範例

<div></div>
<div class="b2"></div>
div{
 border-top: solid 20px #243010;
 border-bottom: solid 20px #243010;
 border-right: solid 2px #243010;
 border-left: solid 2px #243010;
 width: 350px; height: 200px;
 display: inline-block;
 margin-right: 20px;
 text-align: center;
 line-height: 200px;
}

.b2{
 box-sizing: border-box;
 position: relative;
 top: 20px;
}
&nbsp

Display

box-sizing: 無調整

 

box-sizing: border-box

Leave a Reply

Your email address will not be published. Required fields are marked *