Блочная модель документа / Ширина 100% и ширина по умолчанию [13/23]
×

Ширина 100% и ширина по умолчанию [13/23]

CSS-свойство width задаёт не общую ширину блока, а только ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, внутренних отступов и ширины рамок слева и справа.

Поведение элемента может зависеть от того, как именно вы зададите его ширину.

Первый вариант. Вариант по умолчанию, когда ширина не задается, соответствует значению width:auto;. В этом случае блок занимает всю ширину родительского блока. Если у блока есть внутренние отступы или рамки, то его ширина содержания автоматически уменьшается, а общая ширина остается равной ширине родителя.

Второй вариант. Когда ширина блока задана явно, например, width:100%;. В этом случае ширина содержания блока равна ширине родительского блока. Если блоку добавить внутренние отступы и рамки, то его общая ширина становится больше ширины родителя.

В этом задании вы увидите, как эти эффекты работают на практике. Обратите внимание, что ширины блоков будут расчитываться автоматически.

Хотите получать макеты для тренировки? Подписывайтесь на полезную рассылку!

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ширина 100% и ширина по умолчанию</title> <link rel="stylesheet" href="/assets/course9/style1.css"> </head> <body> <div class="container"> Ширина содержания: 200px<br> Ширина общая: 244px <div class="block block-1" style="width: auto;"> содержания:<br> общая: </div> <div class="block block-2" style="width: 100%;"> содержания:<br> общая: </div> </div> </body> </html>
CSS
.container { width: 200px; margin-left: 20px; margin-top: 20px; padding: 10px 20px; font-size: 12px; } .block { padding: 10px 0; } .block-1 { margin-bottom: 5px; } .block-2 { }
HTML Academy
  1. Задайте элементам с классом block-1 внутренние отступы размером 20px.
  2. И элементам с классом block-2 внутренние отступы размером 20px.

Обратите внимание, как изменилась ширина блоков.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.