Открыть меню    

Блочная модель с объявлением 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

Комментарии к статье

Добавить комментарий к сниппету