После всего этого применение полей, рамок и отступов к замещаемым строковым элементам кажется почти простым. Отступы и рамки применяются к замещаемым элементам как обычно; отступ добавляет пространство вокруг фактического содержимого, и рамка окружает отступ. Необычно в данном случае то, что эти два фактора в действительности влияют на высоту контейнера строки, потому что они – часть строкового блока замещаемого строкового элемента (в отличие от строковых незамещаемых элементов).Результат применения следующих стилей:

img {height: 20px; width: 20px;}
img.one {margin: 0; padding: 0; border: 1px dotted;}
img.two {margin: 5px; padding: 3px; border: 1px solid;}

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

img.two {margin-top: -10px;}

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

Добавлено: 18 Июля 2018 07:56:59 Добавил: Андрей Ковальчук Нравится 0

Добавить