Доброго времени суток. Перешел к 13 уроку. Вопрос по теории:
В первом абзаце сказано: "… Общая ширина блока затем складывается из трёх компонентов: ширины содержания, внутренних отступов и ширины рамок слева и справа.
Внешние отступы уже не участвуют в вычислении общей ширины?
Заранее спасибо за ответ.
“Ширина блока” и “общая ширина, т. е. ширина занимаемого блоком места” это немного разные понятия.
Спасибо. Вот я и хочу понять, в чем разница ).
Т.е. ширина блока включает в себя margin, а общая ширина нет?
И если “общая ширина” - это “ширина занимаемого блоком места” - разве margin, принадлежащий этому блоку, не входит в состав этого блока и не занимает место при ненулевых значениях?
Ведь в том же курсе (урок 7) в стандартной блочной модели margin как часть области присутствует.
Давайте сначала.
“Ширина содержания” - это значение width.
“Общая ширина блока” - это width + внутренние отступы слева и справа + рамка слева и справа.
“Ширина занимаемого блоком места (область - в данном случае имеется в виду ширина, высоту не рассматриваем)” - это width + внутренние отступы слева и справа + рамка слева и справа + внешние отступы справа и слева.
1 лайк
Н-да… “Discussio mater veritas est” (с) 
Наверное я баран ))
На http://htmlbook.ru/blog/shirina-bloka четко сказано, что " завершают блок отступы (margin)." Автор сайта, видно, заблуждается и путается в понятиях ))
Давайте еще раз:
Блок есть суть прямоугольник. Т.е. блочная модель элемента подразумевает прямоугольную область, которая состоит (если принять за основу спецификацию w3c - что 2, что 3 редакцию (извините, но специально залез на сайт w3c) из собственно содержимого, полей, границ и отступов. Таким образом продолжаю считать, что ширина блока и ширина занимаемой блоком области есть понятия равнозначные, а значит, в теории к уроку 13 сама формулировка “Общая ширина блока затем складывается из трёх компонентов: ширины содержания, внутренних отступов и ширины рамок слева и справа.” немного некорректна, т.к. вводит нас, новичков, в заблуждение.
И хотелось бы пример, в котором “Общая ширина блока” при ненулевых маргинах отличается от “ширины занимаемого блоком места” при тех же значениях маргинов.
Ничего) Ищем истину.
Спорить после полуночи я уже не буду. Завтра модератор почитает и, быть может, рассудит нас.
Здравствуйте! Такой вопрос по этому уроку. Почему когда второму блоку задали padding: 20px; и размер блока увеличился до 244px, он “выпал” вправо? хотя логичнее было бы если он “раздулся” влево и вправо одинаково? Заранее спасибо за ответ!
Ссылку на задание прикрепите, пожалуйста.
Он “раздулся” и влево и вправо. Но поскольку в html-коде для блока 2 прописана ширина 100%, то поведение этого блока отличается от блока 1.
1 лайк
Почему блок 2 “раздулся” так:
а не так:
Доброго времени суток. Вставлю свои 5 копеек. Как мне кажется, дело в width:100%, как уже писала Ineska. При данном значении элемент растянется на всю ширину “родителя”, добавляем сюда еще внутренний отступ, границы, и в результате при сохранении длины элементу ничего другого не остается, как сместиться вправо на величину отступов и толщину границ. Если хотите равномерно выровнять тут блок 2 на ширину “родителя”, добавьте ему наравне с положительным padding отрицательный горизонтальный margin с учетом толщины границ, margin:0 -22px;. Ну а чтобы блок совсем уж вылез из “родителя”, как Вы нарисовали - увеличьте горизонтальные отступы вдвое (40 и -42 соответственно), но тогда это будет немного не соответствовать условиям задания. А вообще - не бойтесь экспериментировать на поле CSS. Нажать кнопку “Следующее задание” никогда не поздно . И не важно, что тут стили внутри html-кода приоритетнее - !important пока не отменили . Удачи.
2 лайка