CSS padding занимает пространство за пределами

Question

Если я не ошибаюсь, значение прокладки занимает пространство внутри фактической границы и значение поля занимает пространство вне фактической границы, не так ли?

Итак, если я правильно, то этот параметр CSS:

.something { width: 400px; padding: 10px; border: 0; } 

пробудет в 400px шириной.

Так что, если у меня есть такие настройки, как это:

*    { margin: 0; padding 0; border: 0px; } 
.main-wrapper { width: 960px; } 
.main-section { width: 720px; padding: 10px; float: left; } 
.sidebar  { width: 240px; padding: 10px; float: left; } 
.footer  { clear: both; } 

Насколько я знаю, фактическая ширина .main-section будет 700px и 20px обивка влево и вправо. И фактическая ширина для .sidebar будет 220px с 20px обивка влево и вправо. Таким образом, общая ширина будет точно такой же, как ширина main-wrapper. Как это:

(10px + 700px + 10px) + (10px + 220px + 10px) = 960px //.main-wrapper width 

То, что я не получаю это, почему .sidebar не может сидеть прямо в правой стороне .main-wrapper «s? Это подобно тому, как значение padding занимает пространство за пределами границы. Таким образом, .main-wrapper не может соответствовать его содержимому, а затем .sidebar убегает ...

Почему это происходит?

Answer 1

Добавка добавляется к окончательному размеру элемента.

(10px + 720px + 10px) + (10px + 240px + 10px) = 1000px 

Answer 2

Начальное значение box-sizing является content-box. Это означает, что

В width и height свойства измеряются в том числе только содержание, но не отступы, границы или маржу.

Вместо этого, вы можете попробовать box-sizing: border-box:

В width и height свойства включают отступы и границы, но не маржу.

Существует также box-sizing: padding-box, но это не поддерживается всеми браузерами

В width и height свойства включают размер дополнения, и не включают границу или маржу.