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

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

Я также пробовал marging-left, но, хотя это не увеличивает общую ширину моего элемента box, он смещает его вправо, что также приводит к его перекрытию.

Каков наилучший способ решения этой проблемы?

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

введите здесь описание изображения


person Richard Rodgers    schedule 10.08.2015    source источник


Ответы (1)


Это поведение блочной модели по умолчанию. Подробнее о блочной модели можно узнать здесь.

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

box-sizing:border-box;

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

person Jesse Kernaghan    schedule 10.08.2015
comment
Большое спасибо, это сработало отлично. Я узнаю все больше и больше, выполняя личные проекты. Спасибо! - person Richard Rodgers; 11.08.2015