Как рассчитать ширину контентной области по коду?

Question

[Twixel]

Не могли бы объяснить как рассчитать ширину контентной области элемента .content.



.wrapper
{
box-sizing: border-boxl;
width: 500px;
padding: 20px;
}

.content
{
box-sizing: border-box;
padding: 10px;
}
На что обратить внимание при расчете, и при каких свойствах, что то может поменяться в решение?

Answer 1

[smigles]

Содержимое .wrapper имеет ширину 500 − 20 * 2 = 460px. Если .content находится внутри .wrapper, то содержимое .content будет иметь ширину 460 − 10 * 2 = 440px. В обоих случаях мы вычитаем левый и правый padding. Если бы был border, вычитали бы и его тоже.

Comments

[Twixel]

Спасибо за ответ, а если будет немного по другому?
.wraper
{
display: flex;
flex-direction: colum;
max-width: 150px;
}
.content
{
box-sizing: border-box;
width: 120px;
height: 200px;
padding: 10px 15px 20px 25px;
}
content находится внутри wrapper

[smigles]

Twixel, важно разобраться в том, как вычисляются ширина и высота при box-sizing: content-box (это значение по умолчанию) и при box-sizing: border-box. При content-box размеры задаются для внутренней части блока, то есть его содержимого (не включают margin, padding и border). При border-box размеры задаются для блока целиком (включают padding и border, но не margin).

[Twixel]

smigles, а если судить по этой части кода, просчитывать по max-width или width?

[smigles]

Twixel, .content имеет размеры 120×200. Размер содержимого будет меньше на величину padding, то есть будет составлять 80×170.

Кстати, на max-width, min-width, max-height, min-height значение box-sizing тоже влияет. Вообще border-box используется во фреймворках типа Bootstrap и, как правило, лучше повсюду его использовать:

*, ::before, ::after {
  box-sizing: border-box;
}

Answer 2

[hzzzzl]

getComputedStyle



(2 пикселя уходят на border 1px + 1px)

Comments

[Twixel]

Спасибо за ответ.