AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Согласно спецификации CSS свойства width и height задают ширину и высоту контента и не включают в себя значения отступов (margin), полей (padding) и границ (border).

Свойство box-sizing меняет алгоритм расчета ширины и высоты блока.

Пример с шириной блока

Ширина блока с учетом полей и рамок:
box-sizing: border-box;
Ширина блока без учета полей и рамок:
box-sizing: content-box;
Исходный код этого примера:

  <style>
   .box1, 
   .box2 { 
    width: 300px;
    padding: 10px;
    border: 2px solid #000;
    margin-top: 10px;
    background: #9cf;	
    }
   .box1 { 
    box-sizing: border-box; /* Ширина блока с учетом полей и рамок */
   }
   .box2 { 
    box-sizing: content-box; /* Ширина блока без учета полей и рамок */
   }
  </style>

<p>Согласно спецификации CSS свойства width и height задают ширину и высоту 
контента и не включают в себя значения отступов (margin), полей (padding) и границ (border). </p>
<p>Свойство box-sizing меняет алгоритм расчета ширины и высоты блока.</p>
<h4>Пример с шириной блока</h4>
  <div class="box1">Ширина блока с учетом полей и рамок:<br>box-sizing: border-box;</div>
  <div class="box2">Ширина блока без учета полей и рамок:<br>box-sizing: content-box;</div>


. Взгляните по новому на металлические лестницы изготовленные на заказ тут http://mir-lest.ru!

© Copyright 2008-2016 by KDG