Эта статья демонстрирует:
- Как работают отрицательные поля в CSS?
- Использование отрицательного свойства поля сверху
- Использование отрицательного свойства нижнего края поля
- Использование свойства отрицательного поля справа
- Использование свойства отрицательного поля слева
- Почему margin-top: -5 != margin-bottom: 5?
Как работают отрицательные поля в CSS?
Отрицательное поле перемещает содержимое за пределы страницы. Метод использования отрицательной маржи такой же, как и положительной, за исключением того, что со значением используется «-». Следуйте приведенным ниже вариантам отрицательной маржи:
Существующий HTML-файл
“ книга.jpg » — это изображение, хранящееся в локальном каталоге, его путь указан как « источник ' ценить. “ ширина ' и ' высота ” изображения установлены на 50%. Теперь создайте « <дел> » и установите для его фона значение « доджерблю ». Внутри элемента «
<центр >
<источник изображения '=' '../книга.jpg' высота '=' 'пятьдесят%' ; ширина '=' 'пятьдесят%' >
<стиль div '=' 'цвет фона: dodgerblue' >
'=' 'черный цвет;' > Добро пожаловать в Linuxhint >
>
>
После компиляции приведенного выше кода вывод выглядит так:
“ ” находится в нижней части веб-страницы перед применением отрицательного поля.
Использование отрицательного свойства поля сверху
Добавлять ' верхняя граница ” имущество к “ ” и задайте его отрицательное значение. Например, здесь -15% — это значение свойства margin-top:
<центр >
<источник изображения '=' '../книга.jpg' высота '=' 'пятьдесят%' ; ширина '=' 'пятьдесят%' >
<стиль div '=' 'фоновый цвет: dodgerblue' >
'=' 'цвет: черный; верхнее поле: -15%;' > Добро пожаловать в Linuxhint >
>
>
После выполнения кода веб-страница выглядит так:
Вывод показывает, что отрицательное поле margin-top заставляет элемент «
» отображаться перед родительским элементом.
Использование отрицательного свойства нижнего края поля
Примените те же свойства, что и выше, и просто измените « нижняя граница ' свойство. После этого добавьте изображение внизу элемента «
< h3 стиль '=' 'цвет: черный; нижняя граница: -5%;' > Добро пожаловать в Линуксинт h3 >
див >
< изображение источник '=' '../книга.jpg' высота '=' 'пятьдесят%' ; ширина '=' 'пятьдесят%' >
После обновления кода наша веб-страница выглядит так:
Приведенный выше вывод показывает, что текст получает нижнее поле -5%.
Использование свойства отрицательного поля справа
Задав значение свойства margin-right -55% для элемента
, он движется в противоположном направлении:
< див стиль '=' 'фоновый цвет: dodgerblue;' >
< h3 стиль '=' 'цвет: черный; левое поле: -55%; ' > Добро пожаловать в Линуксинт < / h3 >
< / див >
< изображение источник '=' '../книга.jpg' высота '=' 'пятьдесят%' ; ширина '=' 'пятьдесят%' >
После выполнения кода вывод выглядит так:
Вывод показывает, что текст получает отрицательное поле справа.
Использование свойства отрицательного поля слева
Точно так же работает свойство margin-left, имеющее отрицательное значение. В приведенном ниже коде элемент «
» перемещается на 50% влево в направлении, противоположном свойству margin-left: <стиль div '=' 'фоновый цвет: dodgerblue;' >
'='
'цвет: черный; левое поле: -50%;' > Добро пожаловать в Linuxhint > >
<источник изображения '=' '../книга.jpg' высота '=' 'пятьдесят%' ; ширина '=' 'пятьдесят%' >
Вывод приведенного выше кода:
Вот как отрицательное поле работает в CSS.
Почему margin-top:-5 != margin-bottom:5?
Когда ' нижняя граница: 5% », он добавляет поле от нижней стороны к центру элемента, но когда « маржа-верх:-5% ” добавляет отступ в размере 5 % сверху, но в противоположном направлении (вне страницы).
Заключение
В CSS отрицательное поле работает в противоположном направлении, присваивая значение поля. Он перемещает содержимое элемента наружу/за пределы страницы. «margin-top:-5» не равно «margin-bottom:5», потому что оба значения свойства перемещают содержимое в противоположных направлениях, соответствующих родительской позиции. Эта статья успешно продемонстрировала, как работает отрицательная маржа.