“ верхняя граница ” помогает многим разработчикам создавать адаптивные макеты и позиционировать элементы HTML. Использование свойства «margin-top» обеспечивает больший контроль над элементами HTML, добавляет визуальное разделение и помогает создавать более адаптивные дизайны. В этом руководстве демонстрируется свойство margin-top с практической реализацией в CSS.
- Что такое свойство «margin-top»?
- Используйте свойство «margin-top» с положительным значением
- Используйте свойство «margin-top» с отрицательным значением
Что такое свойство «margin-top»?
“ верхняя граница ” используется для создания дополнительного пространства между элементами HTML. Он может быть установлен как с положительными, так и с отрицательными значениями. Эти значения устанавливаются в соответствии с потребностями дизайна и помогают предотвратить перекрытие и настроить расстояние между элементами HTML.
Как использовать свойство «margin-top» с положительным значением?
Свойство «margin-top» с положительным значением добавляет дополнительный интервал от верхнего положения к центру выбранного HTML-элемента. Предоставленное значение может быть в пикселях, процентах, rem или в глобальных значениях, таких как auto, inherit, unset и т. д. Давайте рассмотрим пример для лучшего понимания:
Пример: использование положительного значения
Предположим, что HTML-файл создает « <дел> » и предоставляет фиктивные данные. Далее назначьте « положительный » в класс элемента «div»:
< тело >
< див сорт '=' 'положительный' >
< п > Margin top с положительным значением присваивается п >
див >
тело >
После создания структуры HTML примените свойства CSS к « положительный ' сорт:
< стиль >
.положительный {
ширина: 300 пикселей;
высота: 200 пикселей;
фоновый цвет: лесной;
размер шрифта: 20px;
цвет: #ффф;
поле сверху: 50px;
}
стиль >
В приведенном выше фрагменте кода:
- Сначала установите значения « 300 пикселей ' и ' 200 пикселей 'к CSS' ширина ' и ' высота свойства соответственно.
- Далее « фоновый цвет », « размер шрифта ', и ' цвет «Свойства CSS используются для лучшей визуализации.
- В конце концов, значение «50px» предоставляется « верхняя граница », чтобы добавить дополнительное пространство.
После выполнения приведенного выше фрагмента кода веб-страница выглядит так:
Приведенный выше рисунок иллюстрирует эффект установки значения свойства margin-top на веб-странице.
Как использовать свойство «margin-top» с отрицательным значением?
“ верхняя граница ” с отрицательным значением задает дополнительный интервал от верхней позиции напротив центра или к внешней стороне страницы относительно выбранного HTML-элемента. Он в основном используется для создания перекрывающихся эффектов или для позиционирования элемента HTML.
Давайте рассмотрим пример для лучшего понимания.
Пример: использование отрицательного значения
Предположим, что HTML-файл создает « <дел> » и предоставляет фиктивные данные. Далее назначьте « отрицательный » в класс элемента «div»:
< стиль >.отрицательный {
белый цвет;
выравнивание текста: по центру;
фоновый цвет: красный ;
верхняя граница: -30px ;
отступ: 30 пикселей;
высота: 100 пикселей;
}
стиль >
< тело >
< див сорт '=' 'отрицательный' >
Отрицательное значение присваивается для Маржинальное свойство
див >
тело >
Описание вышеприведенного фрагмента кода приведено ниже:
- Во-первых, « отрицательный » класс выбирается внутри « <стиль> », чтобы применить стиль CSS.
- Далее установите значения « 220 пикселей ' и ' красный 'к CSS' ширина ' и ' фоновый цвет ” свойства для создания лучшей визуализации различий.
- Затем установите значение « -30px 'к CSS' верхняя граница ' свойство.
- После этого создайте « <дел> » и присвойте ему класс « отрицательный ». Кроме того, предоставьте фиктивные данные HTML-элементу div.
После выполнения приведенного выше фрагмента кода веб-страница выглядит следующим образом:
Вышеупомянутый gif отображает эффект, происходящий в дизайне веб-страницы, путем установки отрицательного значения для свойства margin-top.
Заключение
“ верхняя граница ” используется для создания дополнительного пространства между элементами HTML. Он может быть установлен как с положительными, так и с отрицательными значениями. Если свойству «margin-top» присвоено положительное значение, дополнительное пространство добавляется к центру веб-страницы или выбранного элемента HTML. В случае «отрицательного» значения пробел добавляется, но ближе к внешней стороне страницы. В этой статье показано, что такое свойство margin-top в CSS.