Прокладка на плавающих элементах

Question

Как добавить отступы в поплавок: правый элемент без необходимости испортить все? Разве не набивка должна работать внутри не снаружи? Посмотрите, что происходит с некоторыми прокладками на зеленой части: http://lauradifazio.altervista.org/cms/

Answer 1

Общая площадь ваш элемент (любой элемент, плавали или нет) занимает выглядит следующим образом:

totalWidth = contentWidth + margin + border + padding

При указании width свойства с помощью CSS, вы только установив contentWidth из выше уравнения.

Например, если вы пытались поместить элемент в заданное пространство, вам необходимо учитывать все факторы ширины, а не только один. Так что, если у вас есть только 200px пространства, и вы хотите, запас 5px вокруг содержимого, с границей 1px, и 10px обивка, вы должны работать его следующим образом:

contentWidth = availableWidth - margin - border - padding 
contentWidth = 200px - (2x5px) - (2x1px) - (2x10px) 
contentWidth = 200px - 10px - 2px - 20px 
contentWidth = 168px 

**note that the (2xNN) refers to the fact that you have to 
    consider both the impact to both the left and right side 
    of the element in the total. 

Так что в вашем CSS вы бы стилизовать элемент как:

width: 168px; 
border: 1px <color> <type>; 
padding: 10px; 
margin: 5px; 

Это как W3C (т.е. стандарт) модель коробка работает. Существуют и другие модели, которые вы можете использовать, используя свойство CSS box-sizing, чтобы определить, как вы хотите, чтобы ваша модель коробки работала, но при необходимости вы можете использовать стандартную коробку.

Answer 2

Помните, что дополнение добавляется к вашей ширине. Таким образом, ваша ширина 200px на самом деле 210px, если вы включите дополнение 5px. Правильная ширина должна быть 190 пикселей.

Answer 3

Необходимо компенсировать ширину элемента. В вашем случае сделайте ширину div 190px вместо 200px, так как у вас есть 5px отступов.

Полезный ресурс: http://www.yourhtmlsource.com/stylesheets/cssspacing.html

Answer 4

Ширина элемента делает не включают в себя заполнение. Если вы добавляете дополнение к элементу, вы должны должны соответственно уменьшить ширину и высоту.