Главная страница / Занятия / #4 / Свойство box-sizing

Свойство box-sizing

Задание:

Рассказать об использовании свойства box-sizing элементов html-документа.

Значение content-box:

Свойства width и height обозначают то, что находится внутри padding.

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Значение content-box свойства box-sizing</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div id="contentBoxContainer">
      Текст в&nbsp;блоке.
     </div>
    </body>
   
   </html>

Файл styles.css:

   #contentBoxContainer		{ width: 50%; box-sizing: content-box; border: 10px solid #ff0000; padding: 20px; }

Результат:

Пример использования значения content-box свойства box-sizing можно посмотреть здесь.

Значение border-box:

Значения width и height задают высоту и ширину всего элемента.

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Значение border-box свойства box-sizing</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div id="borderBoxContainer">
      Текст в&nbsp;блоке.
     </div>
    </body>
   
   </html>

Файл styles.css:

   #borderBoxContainer		{ width: 50%; box-sizing: border-box; border: 10px solid #ff0000; padding: 20px; }

Результат:

Пример использования значения border-box свойства box-sizing можно посмотреть здесь.