Испытание: ещё одна CSS-таблица [18/18]


#1

Здравствуйте! Помогите разобраться!
Сделал финальное испытание на 100%, но методом подбора, что мне самому не нравится.
Сразу задал для блока article свойство box-sizing:border-box, чтобы было проще подбирать ширину элементов, но в итоге у меня получилось что заданная мной ширина для первого столбца оказалась больше чем для третьего, хотя в образце да и в результате она меньше. В чем может быть дело?
Я так и не смог понять как вычисляется ширина столбцов в этом задании.
Заранее спасибо!

Мой CSS-код ниже

article {
width: 480px;
display:inline-table;
background-image:url(img/wood.png);
border:5px solid #686868;
margin:10px;
border-collapse:separate;
border-spacing:15px;
box-sizing:border-box;
}
article ul{
display:table-row;
}
article ul:nth-child(2n+1){
background-image:url(“img/wall-1.png”);
}
article ul:nth-child(2n){
background-image:url(“img/wall-2.png”);
}

article li{
display:table-cell;
border:10px solid #686868;
padding-top:20px;
padding-bottom:20px;
}
article li:nth-child(1){
width:130px;
padding-left:30px;
}
article li:nth-child(2){
padding-left:20px;
padding-right:20px;
}
article li:nth-child(3){
width:125px;
padding-left:50px;
padding-right:20px;
}


18/18 Испытание 100%, Проверьте пожалуйста!
Испытание: итоговая таблица [23/23]
#2

На самом деле ширина первого конечно не больше третьего. Это хорошо видно в консоли.
Ширину первого столбца вы определили верно. Это 130px.
Вот из чего она складывается: ширина картинки + внутренний отступ слева + внутренний отступ справа + ширина рамки слева + ширина рамки справа.
Ширину второго столбца вы не прописывали. По формуле получается 110px.
Посчитаем для третьего. Ширина картинки - та же, отступы (по образцу видно что они одинаковы слева и справа) 50px2, ширина рамки слева и справа 10px2
Получается 170px.
Прописав неравные отступы у столбцов, вы сами себя запутали.
Доверяйте глазам… и консоли)


#3

погодите. Я немного не понял.
Я рассуждаю следующим образом:
Если я включаю box-sizing:border-box, то у меня width определяет ширину блока без учета бордеров, паддингов и внутреннего содержимого. Так? Или я что-то путаю.
Тогда Ваш расчет получается верным только для box-sizing:content-box (то что стоит по умолчанию). Так?
Просто в консоли у меня при включенном border-box изменение паддингов у блоков влияло на расположение блоков. И этот факт меня сильно смущает.


#4

Перепутали. Если border-box, то отступы(внутренние) и рамки включаются.


#5

Да, вы правы. Я неточно сформулировал вопрос. Заранее прошу прощения за некоторый сумбур в мыслях. Просто я пытаюсь разобраться с Вашей помощью, но пока у меня в голове информация в порядок не пришла. Поэтому я, с Вашего позволения, еще немного Вас помучаю.

Попробую переформулировать вопрос:
Я уловил Вашу идею о том, как сделать правильно и наиболее точно. Действительно, подставив в код указанную вами ширину столбцов и поставив одинаковые паддинги я тоже получил 100%. Это при включенном border-box.
При выключенном - все съехало.

Но главное, что я не могу понять, так это почему при включенном border-box паддинги влияют на взаимное расположение элементов-контейнеров.
То есть я, ради эксперимента, изменил один из паддингов, для третьего столбца поставив не (50, 50), а (50, 20). И у меня поехали размеры и местоположение всех 3-х столбцов. (На всякий случай: я сейчас говорю только о горизонтальных паддингах).

Я был уверен, что при включенном border-box, паддинги влияют только на расположение внутреннего содержимого относительно границ контейнера. А оказывается что нет. Подскажите пожалуйста в чем тут дело.

И еще один вопрос: а откуда вы узнали ширину картинок?


#6

Ширину картинок, а также размеры всех элементов я узнаю в консоли.
Хорошо. Давайте еще поэкспериментируем.
Внимание! “Смертельный номер”. Как вы думаете, что будет с вашей таблицей, если вы уберете ВСЕ упоминания свойства width, а также свойство box-sizing из CSS-кода?


#7

Так. С консолью - разобрался. Большое спасибо! :smile:
Теперь по “смертельному номеру”.
Убрал.
В теории должно было получиться, все как Вы указали сразу по расчету:

  1. первый столбец: 50 + 30 + 30 + 10 + 10=130
  2. второй столбец: 50 + 20 + 20 + 10 + 10 =110
  3. третий столбец 50 + 50 + 50 + 10+ 10 =170
    и все совпасть.

К сожалению, по факту почему-то получилось не совсем так:
первый столбец уменьшился. Второй и третий соответственно съехали.
Выкладываю скрин экрана. с консолью. Картинка 50х50, при этом размер ее в консоли 53х54. Брррр.

И вопрос с падингами при включенном border-box еще актуален.

Ниже мой код, соотвествующий скрину.


article {
width: 480px;
display:inline-table;
background-image:url(img/wood.png);
border:5px solid #686868;
margin:10px;
border-collapse:separate;
border-spacing:15px;
/box-sizing:border-box;/
}
article ul{
display:table-row;
}
article ul:nth-child(2n+1){
background-image:url(“img/wall-1.png”);
}
article ul:nth-child(2n){
background-image:url(“img/wall-2.png”);
}

article li{
display:table-cell;
border:10px solid #686868;
padding-top:20px;
padding-bottom:20px;
}
article li:nth-child(1){
/width:130px;/
padding-left:30px;
padding-right:30px;
}
article li:nth-child(2){
/width:110px;/
padding-left:20px;
padding-right:20px;
}
article li:nth-child(3){
/width:170px;/
padding-left:50px;
padding-right:50px;
}


#8

Эх, такой номер сорвали… А ведь как чувствовала, слово “все” выделила как только могла.
Уберете все - посмотрите эффект.
Дело в том, что без заданного свойства box-sizing: border-box; настоящая ширина вашей таблицы не 480px, а 470px. Рамка не входит. И происходит следующее. “Неучтенные” 10px столбцы съедают пропорционально тому, кто сильнее (толще изначально).
Данные из консоли: первый столбец отхватил себе 3,167px, второй - 2,683px, третий (самый жадный) - 4,15px.
Поэтому вы можете исправить ширину таблицы, написав 470px. Или не писать ее вообще, браузер сам посчитает.


#9

Так. Постепенно все в голове укладывается :slight_smile:
Спасибо огромное.

Осталась вишенка на торте:
почему все же при включенном border-box. паддинги влияют на расположение столбцов?

article {
width: 480px;
display:inline-table;
background-image:url(img/wood.png);
border:5px solid #686868;
margin:10px;
border-collapse:separate;
border-spacing:15px;
box-sizing:border-box;
}

Прикладываю 2 скрина.

  1. с “нормальными” паддингами
    article li:nth-child(3){
    width:170px;
    padding-left:50px;
    padding-right:50px;
    }

  2. с “поправленными” паддингами - у 3 столбца правый паддинг изменен с 50 на 20, и поплыло все!
    article li:nth-child(3){
    width:170px;
    padding-left:50px;
    padding-right:20px;
    }


#10

Ладно. Ответ у вас уже есть, но давайте еще раз.
Дело здесь совсем не в border-box. А в том, что это таблица. И если ей задана ширина в 480px, то она сделает все возможное, чтобы в этот размер уложиться.
Уменьшив внутренний отступ у третьего столбца, вы уменьшили его ширину. Теперь получается так: 50px ширина картинки + внутренние отступы (50px + 20px) + рамка (10px2)= 140px
Ой, какая досада… Кажется, теперь 480px в сумме не получится.
130px + 110px + 140px + 15px
4(border-separate) + 5px2(рамка) = 450px.
Разница 30px. Непорядок. Теперь аж 30px неучтенных. А что происходит с неучтенным пространством? Правильно. Делится на всех пропорционально исходному размеру.
Самый толстый третий, ему больше остальных - 13,85px, первому меньше - 9,233px, второму достается 6,917px. В сумме 30px.
Cуммируем новые размеры: (130+9.233) + (110+6,917) + (140+13,85) + 15
4(border-separate) + 5*2(рамка) = 480px
Cправедливость восстановлена.
Пожалуйста, скажите, что вы уже поняли. На третий вариант одной и той же истории меня не хватит))


#11

Огромное спасибо за Ваше терпение. :)))) Только благодаря ему, я надеюсь добраться до истины :))))
Описанный Вами самым подробным образом, механизм “растяжки” столбцов браузером для подгонки под общий размер мне абсолютно понятен, и все Ваши расчеты ясны :)))

Но похоже я опять не совсем четко сформулировал свой вопрос.
Как я был уверен, этот механизм справедлив только для значения box-sizing; content-box, а в случае box-sizing; border-box, изменение внутренних размеров не должно приводить к изменению внешних.

Поэтому, у меня остался вопрос: Почему в принципе, при уменьшении отступа у столбца, его ширина уменьшилась, и включился весь этот механизм растяжки, ведь при включенном border-box этого происходить не должно, и ширина должна была остаться фиксированной, определенной параметром width?

Или я все-таки неправильно понимаю работу border-box?

ЗЫ: рекомендованную ранее в [15/23] статью про border-box я прочитал, и собственно после нее и решил его попробовать.

Статья


#12

Мы с вами уже разбирали, из чего складывается общая ширина элемента…
По-моему то, что ширина уменьшается при уменьшении внутреннего отступа - это достаточно логично.
Внимание! Вопрос: в чем разница между “шириной содержания” и “общей шириной” элемента?


#13

Да, мы с Вами разобрали классическую блочную модель (content-box), в которой общая ширина элемента складывается из: ширины содержания + паддинги, бордеры и маргины. В этом случае width определяет ширину содержания.
И этой модели действительно логично выглядит тот факт, что уменьшение ширины паддинга напрямую влияет на уменьшение общей ширины всего элемента.

Давайте теперь рассмотрим из чего складывается ширина элемента при включенном border-box?
Мой ответ такой: width + маргины. При этом в width состоит из: ширины содержания + паддингов и бордеров.
Я правильно понимаю?

Если да, то повторю свой вопрос: Как изменение паддигнов в этом случае может влиять на общую ширину элемента?

Если нет, то где ошибка в моей логике?


#14

Правильно понимаете.
Но только как говорится “от перемены мест слагаемых сумма не меняется”.
При любом значении box-sizing в составе общей ширины - ширина содержания, паддинги и маргины.
Когда вы уменьшаете внутренний отступ элемента, то его реальная ширина получается меньше той, что вы прописываете в CSS (напоминаю, это 170px). Общая ширина таблицы задана и этим ограничена - 480px.
У таблицы не хватает свободы маневра, чтобы исправить положение, ведь делиться приходится со всеми. В итоге ни один из элементов по ширине не соответствует образцу.


#15

Тогда не понятно, в чем смысл boder-box?
Я был уверен, что включив его и задав явно width, можно уже не задумываться над размерами содержимого и паддингов.


#16

Это ячейка таблицы. Ее размер напрямую зависит от размера содержимого и отступов.
Может я не могу правильно подобрать слова, чтобы вам объяснить. Пускай попытается кто-то еще из тех, кто читает эту тему.


#17

Значит вопрос остался открытым.
Впрочем вот еще одна статья про Border-box. Статья на хабре

После ее прочтения я опять же делаю вывод что при задании box-sizing:border-box и явном задании width, паддинги не должны влиять на размер элемента, и, как следствие на расположение столбцов. Стало быть баг?
Или для таблицы border-box в принципе не работает?

ЗЫ: В любом случае, Вам, Ineska, спасибо большое ,вы многое прояснили.


#18

article {
width: 470px;
height: 100%;
display: table;
border: 5px solid #686868;
border-spacing: 15px;
background-image: url(img/wood.png);
margin: 10px;
}
article ul {
display: table-row;
}
li {
display: table-cell;
border: 10px solid #686868;
vertical-align: middle;
text-align: center;
}
ul li:first-child {
width: 110px;
height: 94px;
}
ul li:last-child {
width: 150px;
}
article ul:first-child li {
background-image: url(img/wall-1.png);
}
article ul:last-child li {
background-image: url(img/wall-2.png);
}


#19

Доброго дня, подскажите начинающему - не могу понять почему в итоге идет вертикальная сдвижка вниз на 1px. Задание выполненно из-за этого на 91%. С ув.Кирилл

article {
width: 470px;
display:table;
border:5px solid #686868;
border-collapse:separate;
border-spacing: 15px;
margin-top:10px;
margin-left:10px;
height:275px;
background-image: url(“img/wood.png”);
}
ul {
display:table-row;
}
li {
display:table-cell;
border: 10px solid #686868;
text-align: center;
vertical-align:middle;

height:95px;
}
ul:first-child li {
background-image: url(“img/wall-1.png”);
}
ul:last-child li {
background-image: url(“img/wall-2.png”);
}
li:first-child {
width:110px;
}
li:nth-child(2) {
width:90px;


}


#20

высоту не надо указывать, все отступами делается
потом все поедет, поправите размеры в псевдоклассах li