Здравствуйте! Помогите разобраться!
Сделал финальное испытание на 100%, но методом подбора, что мне самому не нравится.
Сразу задал для блока article свойство box-sizing:border-box, чтобы было проще подбирать ширину элементов, но в итоге у меня получилось что заданная мной ширина для первого столбца оказалась больше чем для третьего, хотя в образце да и в результате она меньше. В чем может быть дело?
Я так и не смог понять как вычисляется ширина столбцов в этом задании.
Заранее спасибо!
На самом деле ширина первого конечно не больше третьего. Это хорошо видно в консоли.
Ширину первого столбца вы определили верно. Это 130px.
Вот из чего она складывается: ширина картинки + внутренний отступ слева + внутренний отступ справа + ширина рамки слева + ширина рамки справа.
Ширину второго столбца вы не прописывали. По формуле получается 110px.
Посчитаем для третьего. Ширина картинки - та же, отступы (по образцу видно что они одинаковы слева и справа) 50px2, ширина рамки слева и справа 10px2
Получается 170px.
Прописав неравные отступы у столбцов, вы сами себя запутали.
Доверяйте глазам… и консоли)
погодите. Я немного не понял.
Я рассуждаю следующим образом:
Если я включаю box-sizing:border-box, то у меня width определяет ширину блока без учета бордеров, паддингов и внутреннего содержимого. Так? Или я что-то путаю.
Тогда Ваш расчет получается верным только для box-sizing:content-box (то что стоит по умолчанию). Так?
Просто в консоли у меня при включенном border-box изменение паддингов у блоков влияло на расположение блоков. И этот факт меня сильно смущает.
Да, вы правы. Я неточно сформулировал вопрос. Заранее прошу прощения за некоторый сумбур в мыслях. Просто я пытаюсь разобраться с Вашей помощью, но пока у меня в голове информация в порядок не пришла. Поэтому я, с Вашего позволения, еще немного Вас помучаю.
Попробую переформулировать вопрос:
Я уловил Вашу идею о том, как сделать правильно и наиболее точно. Действительно, подставив в код указанную вами ширину столбцов и поставив одинаковые паддинги я тоже получил 100%. Это при включенном border-box.
При выключенном - все съехало.
Но главное, что я не могу понять, так это почему при включенном border-box паддинги влияют на взаимное расположение элементов-контейнеров.
То есть я, ради эксперимента, изменил один из паддингов, для третьего столбца поставив не (50, 50), а (50, 20). И у меня поехали размеры и местоположение всех 3-х столбцов. (На всякий случай: я сейчас говорю только о горизонтальных паддингах).
Я был уверен, что при включенном border-box, паддинги влияют только на расположение внутреннего содержимого относительно границ контейнера. А оказывается что нет. Подскажите пожалуйста в чем тут дело.
И еще один вопрос: а откуда вы узнали ширину картинок?
Ширину картинок, а также размеры всех элементов я узнаю в консоли.
Хорошо. Давайте еще поэкспериментируем.
Внимание! “Смертельный номер”. Как вы думаете, что будет с вашей таблицей, если вы уберете ВСЕ упоминания свойства width, а также свойство box-sizing из CSS-кода?
Так. С консолью - разобрался. Большое спасибо!
Теперь по “смертельному номеру”.
Убрал.
В теории должно было получиться, все как Вы указали сразу по расчету:
первый столбец: 50 + 30 + 30 + 10 + 10=130
второй столбец: 50 + 20 + 20 + 10 + 10 =110
третий столбец 50 + 50 + 50 + 10+ 10 =170
и все совпасть.
К сожалению, по факту почему-то получилось не совсем так:
первый столбец уменьшился. Второй и третий соответственно съехали.
Выкладываю скрин экрана. с консолью. Картинка 50х50, при этом размер ее в консоли 53х54. Брррр.
Эх, такой номер сорвали… А ведь как чувствовала, слово “все” выделила как только могла.
Уберете все - посмотрите эффект.
Дело в том, что без заданного свойства box-sizing: border-box; настоящая ширина вашей таблицы не 480px, а 470px. Рамка не входит. И происходит следующее. “Неучтенные” 10px столбцы съедают пропорционально тому, кто сильнее (толще изначально).
Данные из консоли: первый столбец отхватил себе 3,167px, второй - 2,683px, третий (самый жадный) - 4,15px.
Поэтому вы можете исправить ширину таблицы, написав 470px. Или не писать ее вообще, браузер сам посчитает.
с “поправленными” паддингами - у 3 столбца правый паддинг изменен с 50 на 20, и поплыло все!
article li:nth-child(3){
width:170px;
padding-left:50px;
padding-right:20px;
}
Ладно. Ответ у вас уже есть, но давайте еще раз.
Дело здесь совсем не в border-box. А в том, что это таблица. И если ей задана ширина в 480px, то она сделает все возможное, чтобы в этот размер уложиться.
Уменьшив внутренний отступ у третьего столбца, вы уменьшили его ширину. Теперь получается так: 50px ширина картинки + внутренние отступы (50px + 20px) + рамка (10px2)= 140px
Ой, какая досада… Кажется, теперь 480px в сумме не получится.
130px + 110px + 140px + 15px4(border-separate) + 5px2(рамка) = 450px.
Разница 30px. Непорядок. Теперь аж 30px неучтенных. А что происходит с неучтенным пространством? Правильно. Делится на всех пропорционально исходному размеру.
Самый толстый третий, ему больше остальных - 13,85px, первому меньше - 9,233px, второму достается 6,917px. В сумме 30px.
Cуммируем новые размеры: (130+9.233) + (110+6,917) + (140+13,85) + 154(border-separate) + 5*2(рамка) = 480px
Cправедливость восстановлена.
Пожалуйста, скажите, что вы уже поняли. На третий вариант одной и той же истории меня не хватит))
Огромное спасибо за Ваше терпение. :)))) Только благодаря ему, я надеюсь добраться до истины :))))
Описанный Вами самым подробным образом, механизм “растяжки” столбцов браузером для подгонки под общий размер мне абсолютно понятен, и все Ваши расчеты ясны :)))
Но похоже я опять не совсем четко сформулировал свой вопрос.
Как я был уверен, этот механизм справедлив только для значения box-sizing; content-box, а в случае box-sizing; border-box, изменение внутренних размеров не должно приводить к изменению внешних.
Поэтому, у меня остался вопрос: Почему в принципе, при уменьшении отступа у столбца, его ширина уменьшилась, и включился весь этот механизм растяжки, ведь при включенном border-box этого происходить не должно, и ширина должна была остаться фиксированной, определенной параметром width?
Или я все-таки неправильно понимаю работу border-box?
ЗЫ: рекомендованную ранее в [15/23] статью про border-box я прочитал, и собственно после нее и решил его попробовать.
Мы с вами уже разбирали, из чего складывается общая ширина элемента…
По-моему то, что ширина уменьшается при уменьшении внутреннего отступа - это достаточно логично.
Внимание! Вопрос: в чем разница между “шириной содержания” и “общей шириной” элемента?
Да, мы с Вами разобрали классическую блочную модель (content-box), в которой общая ширина элемента складывается из: ширины содержания + паддинги, бордеры и маргины. В этом случае width определяет ширину содержания.
И этой модели действительно логично выглядит тот факт, что уменьшение ширины паддинга напрямую влияет на уменьшение общей ширины всего элемента.
Давайте теперь рассмотрим из чего складывается ширина элемента при включенном border-box?
Мой ответ такой: width + маргины. При этом в width состоит из: ширины содержания + паддингов и бордеров.
Я правильно понимаю?
Если да, то повторю свой вопрос: Как изменение паддигнов в этом случае может влиять на общую ширину элемента?
Правильно понимаете.
Но только как говорится “от перемены мест слагаемых сумма не меняется”.
При любом значении box-sizing в составе общей ширины - ширина содержания, паддинги и маргины.
Когда вы уменьшаете внутренний отступ элемента, то его реальная ширина получается меньше той, что вы прописываете в CSS (напоминаю, это 170px). Общая ширина таблицы задана и этим ограничена - 480px.
У таблицы не хватает свободы маневра, чтобы исправить положение, ведь делиться приходится со всеми. В итоге ни один из элементов по ширине не соответствует образцу.
Тогда не понятно, в чем смысл boder-box?
Я был уверен, что включив его и задав явно width, можно уже не задумываться над размерами содержимого и паддингов.
Это ячейка таблицы. Ее размер напрямую зависит от размера содержимого и отступов.
Может я не могу правильно подобрать слова, чтобы вам объяснить. Пускай попытается кто-то еще из тех, кто читает эту тему.
Значит вопрос остался открытым.
Впрочем вот еще одна статья про Border-box. Статья на хабре
После ее прочтения я опять же делаю вывод что при задании box-sizing:border-box и явном задании width, паддинги не должны влиять на размер элемента, и, как следствие на расположение столбцов. Стало быть баг?
Или для таблицы border-box в принципе не работает?
ЗЫ: В любом случае, Вам, Ineska, спасибо большое ,вы многое прояснили.
Доброго дня, подскажите начинающему - не могу понять почему в итоге идет вертикальная сдвижка вниз на 1px. Задание выполненно из-за этого на 91%. С ув.Кирилл
