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

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

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

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

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

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

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

Хотите писать JavaScript, используя современный синтаксис (ES2015, ES2016, ES2017)? Уметь тестировать свои программы? Записывайтесь на продвинутый интенсив по JavaScript.

Выполнить задание
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.

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

Теория Проверить Следующее задание
Идёт запись на курс JavaScript, уровень 2 #6, который стартует 6 августа.

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

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

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

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