Коробочная модель (Box Model)

Ответы на вопросы

1. Изобразите коробочную модель элемента, назовите её составные части и названия соответствующих свойств.

   Ответ.

   

2. Каким свойством задаётся фон элемента? На какие части коробочной модели распространяется фон? Какой цвет у фона по умолчанию?

   Ответ. Фон элемента (задаётся свойством background) распространяется на:

   • содержимое,
   • внутренний отступ
   • и рамку.

   Фон не распространяется на внешний отступ (который всегда прозрачный).

   По умолчанию фон элемента прозрачный.

3. Каким свойством задаётся цвет текста элемента? Какой цвет имеет рамка элемента по умолчанию?

   Ответ. Цвет текста задаётся свойством color. По умолчанию цвет рамки совпадает с цветом текста элемента.

4. Сформулируйте правило четырёх сторон и прокомментируйте его на следующих примерах:
   • padding:10px;
   • padding:10px 20px;
   • padding:10px 20px 30px;
   • padding:10px 20px 30px 40px;

   Ответ.

   Правило четырёх сторон:

   Одно значение — для всех четырёх сторон. Иначе начинаем сверху по часовой стрелке. Недостающие значения берём с другой стороны вертикали или горизонтали.

   • padding:10px; — внутренний отступ по 10 пикселов со всех четырёх сторон
   • padding:10px 20px; — сверху и снизу по 10 пикселов, слева и справа по 20
   • padding:10px 20px 30px; — сверху 10, слева и справа 20, внизу 30
   • padding:10px 20px 30px 40px; — сверху 10, справа 20, внизу 30, слева 40.

вверх | возврат