В чем разница между использованием свойств top и left и верхнего и левого полей?
Я знаю, что верхний и левый обычно используются в позиции: абсолютная ситуация, но мне все еще интересно, есть ли какая-то существенная разница.
Пример:
position:absolute;
top:5px;
left:5px;
-vs -
margin-top:5px;
margin-left:5px;
Ну, основное отличие состоит в том, что абсолютно позиционированные элементы выходят из потока содержимого.
Но также с относительно позиционируемыми элементами окружающий контент может стать запутанным.
Поля с другой стороны добавляются к размеру элемента, в то время как окружающий контент течет соответственно.
Смотрите этот образец скрипта с некоторыми отличиями.
Конечно, бывают ситуации, когда обе дают одинаковые результаты, но при нормальных условиях эти два подхода не просто заменяемы и не сопоставимы.
Маржа описывает пространство между вашим полем и соседними полями. Коробки, которые расположены относительно (то есть, которые являются частью нормального потока), будут удерживать достаточное пространство между ними, чтобы удовлетворялись каждый из требований "margin" (называемый "сбрасывание маржи" ).
top и left, с другой стороны, являются позиционными атрибутами, указывающими, где находится ваш ящик; для абсолютно позиционированных блоков значения берутся относительно ближайшего содержащего окна, которое само по себе абсолютно позиционируется. Атрибуты top/left/bottom/right определяют расположение соответствующего края вашего поля, включая его маржу.
Короче говоря, они - совершенно разные понятия. Для нормально протекающих ящиков вы должны использовать margin для управления расстоянием между соседними полями.
A Там есть семантическая разница. Box Коррекции как top указать, насколько запас коробка край (пунктирные края в изображении ниже) смещена от опорного края (Для абсолютно позиционируемых элементов, что верхний край блока коробки, содержащие). Свойства поля, такие как margin-top, определяют ширину области поля поля (расстояние TM между краем пунктиром и сплошным краем на изображении ниже).
B top и left применяются только к расположенным элементам (элементы с position установлены на что-либо, кроме static), а margin-top и margin-left применяются ко всем элементам кроме элементов с табличными типами отображения, отличными от заголовка таблицы, таблицы и встроенной таблицы.