Поля или отступы для интервалов?

Следующий пример идентичен почти во всех браузерах, включая IE6:Поля или отступы для интервалов?

#one {border : 1px solid red;padding:20px} 
#two {border : 1px solid yellow} 
p  {border: 1px solid blue;} 
.marg {margin: 0;padding: 0} 
.padd {margin: 20px} 
</style> 
</head> 
<body> 

<div id="one"> 
    <p class="marg">Padding to div</p> 

</div> 

<div id="two"> 
    <p class="padd">margin tp P</p> 

</div>

Но когда я даю width к div тогда второй div становится короче первой div.

Как мы должны решить, что подходит?

Какие проблемы совместимости с браузером я должен знать?

источник

2010-01-15 Jitendra Vyas

Я бы принял решение, основанное на том, что будет внутри ваших тегов.

Например, это <p> единственное, что появится внутри вашего div? Если это так, то это, вероятно, не имеет значения.

Если есть другие элементы, которые будут находиться внутри div, вы хотите, чтобы они дополняли их или нет?

Что касается модифицированной ширины, это, вероятно, связано с different boxing models между браузерами.

источник

2010-01-15 04:05:10 Damovisa

Поляны на внешней стороне, прокладки на внутренней стороне относительно границы. Поэтому, очевидно, если у вас есть что-то вроде фонового изображения и текста, и вы хотите, чтобы текст имел пространство между краем изображения bg, которое вы использовали бы для заполнения. То же самое с границами.

Если вам нужно пространство снаружи в дополнение к пробелу между изображениями border/bg, вы должны использовать поля.

Если вы не делаете ничего сложного в плане дизайна, тогда это не имеет большого значения, но одно, что вам следует обратить внимание, - это крах, если у вас есть элементы, которые идут до/после с вертикальными полями, и вы указываете поля значения будут разрушаться, иногда вы должны использовать прописку, чтобы перемещаться по ней.

Если дать #one и #two шириной 200px, #one будет занимать 240 пикселей без учета горизонтальных границ, так как она имеет 20px отступа по горизонтали.

Режим рендеринга IE5 IE7 IE7/IE7 неправильно рисует нужное количество места, если вы указываете горизонтальное заполнение и ширину, width:100px; padding:20px; заставит блок фактически занять 100 пикселей по ширине, а не на самом деле составляет 140 пикселей, как это должно быть правильно.

Еще одна ошибка, которую нужно отметить: ошибка с двойным краем; если у вас есть элемент с плавающей точкой и маржа, которая находится в том же точном направлении, что и float, например float:left;margin-left:100px;, он случайно удваивается. Это фиксируется добавлением display:inline;, который заставляет его иметь только 100px вместо 200px влево.

Я замечаю, что вы задаете много вопросов, которые будут услышаны, просто читая приличный передний конец книги - Вы рассмотрели чтение:

Возможно, ответы на многие ваши вопросы ...

источник

2010-01-15 04:09:32

Я думаю, что простой способ мышления является границей элемента.

margin space вне границы, в то время как заполнение внутри.

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

источник

2010-01-15 04:11:39 joetsuihk

Поля или отступы для интервалов?

ответ

Смежные вопросы