Блочная модель с объявлением box-sizing: border-box и без
С box-sizing: border-box
и без
HTML
<div id="noBoxSizing"><strong>No box-sizing</strong></div>
<br >
<div id="boxSizing"><strong>With box-sizing</strong></div>
CSS
#boxSizing{
-moz-box-sizing: border-box;
box-sizing: border-box
}
div{
width:250px;
height:250px;
background-color:red;
border:20px solid yellow;
padding:20px;
font-size:11px;
}
div strong{
font-weight:bold;
font-size:14px;
}
jQuery
$('div').html(function(index,oldHtml){
var str = 'width: ' + $(this).width()
+ '<br>'
+ 'height: ' + $(this).height()
+ '<br>'
+ 'width+padding: ' + $(this).innerWidth()
+ '<br>'
+ 'height+padding: ' + $(this).innerHeight()
+ '<br>'
+ 'width+padding+border: ' + $(this).outerWidth()
+ '<br>'
+ 'height+padding+border: ' + $(this).outerHeight();
return oldHtml + '<br>' + str;
});
Без box-sizing
С box-sizing
Комментарии к статье