Заполнение, увеличивающее общий размер элемента ячейки

Question

Правильное поведение для заполнения для увеличения общего размера элемента коробки? Я пытаюсь установить padding в левую сторону элемента box, ширина которого равна 940px, но когда я добавляю 25px в padding в левую сторону, он добавляет эти пиксели к ширине элемента box, что делает его перекрывающим тело, который является родительским элементом.

Я также попытался Маржинальной налево, но пока это не добавляет к общей ширине моего ящика элемента толкает его вправо, заставляя его перекрывать, а ..

Что является лучшим способом для решения с этим вопросом?

Пожалуйста, проверьте скриншот для визуального:

Answer 1

Это поведение по умолчанию блочной модели. Вы можете узнать больше о коробке модели here.

В вашем CSS вы можете определить поведение с атрибутом box-sizing. В этом случае вы хотите:

box-sizing:border-box; 

border-box принимает отступов и границ размеров во внимание при установлении width элемента, который является то, что вы ищете. Однако он не будет рассчитываться на основе размеров полей.