„ margin-top ” Свойството помага на много разработчици при създаването на адаптивни оформления и позициониране на HTML елементи. Използването на свойството „margin-top“ осигурява повече контрол върху HTML елементите, добавя визуално разделяне и помага при създаването на по-добри адаптивни дизайни. Това ръководство демонстрира свойството margin-top с практическа реализация в CSS.
- Какво представлява собствеността „margin-top“?
- Използвайте свойството „margin-top“ с положителна стойност
- Използвайте свойството „margin-top“ с отрицателна стойност
Какво представлява собствеността „margin-top“?
„ margin-top ” се използва за създаване на допълнително пространство между HTML елементите. Може да се задава както с положителни, така и с отрицателни стойности. Тези стойности се задават според нуждите на дизайна и помагат за предотвратяване на припокриване и коригиране на разстоянието между HTML елементите.
Как да използваме свойство „margin-top“ с положителна стойност?
Свойството „margin-top“ с положителна стойност добавя допълнително разстояние от горната позиция към центъра на избрания HTML елемент. Предоставената стойност може да бъде в пиксели, процент, rem или в глобални стойности като auto, inherit, unset и т.н. Нека преминем през пример за по-добро разбиране:
Пример: Използване на положителна стойност
Нека приемем HTML файл, който създава „ След създаването на HTML структурата, приложете CSS свойства към „ положителен ” клас: В горния кодов фрагмент: След изпълнението на горния кодов фрагмент, уеб страницата изглежда така: Горният gif илюстрира ефекта от задаване на стойността на свойството margin-top на уеб страницата. „ margin-top ” свойството с отрицателна стойност задава допълнително разстояние от горната позиция срещу центъра или към външната страна на страницата спрямо избрания HTML елемент. Използва се най-вече за създаване на припокриващи се ефекти или при позиционирането на HTML елемента. Нека преминем през пример за по-добро разбиране. Пример: Използване на отрицателна стойност Нека приемем HTML файл, който създава „ Описанието на горепосочения кодов фрагмент е описано по-долу: След изпълнението на горния кодов фрагмент уеб страницата изглежда така: Горният gif показва ефекта, възникващ върху дизайна на уеб страницата чрез задаване на отрицателна стойност за свойството margin-top. „ margin-top ” се използва за създаване на допълнително пространство между HTML елементите. Може да се задава както с положителни, така и с отрицателни стойности. Ако свойството „margin-top“ е присвоено с положителна стойност, тогава допълнителното пространство се добавя към центъра на уеб страницата или избрания HTML елемент. В случай на „отрицателна“ стойност, интервалът се добавя, но към външната страна на страницата. Тази статия демонстрира какво е свойство margin-top в CSS.
< тяло >
< див клас = 'положителен' >
< стр > Присвоява се горна граница с положителна стойност стр >
див >
тяло >
< стил >
.положителен {
ширина: 300px;
височина: 200px;
цвят на фона: горскозелен;
размер на шрифта: 20px;
цвят: #Ф ф ф;
margin-top: 50px;
}
стил >
Как да използваме свойството „margin-top“ с отрицателна стойност?
.отрицателен {
цвят: бял;
подравняване на текст: център;
Цвят на фона: червен ;
поле отгоре: -30px ;
подложка: 30px;
височина: 100px;
}
стил >
< тяло >
< див клас = 'отрицателен' >
Присвоява се отрицателна стойност за Марж-горна собственост
див >
тяло >
Заключение