Этот пост описывает:
- Когда использовать «заполнение» вместо «маржи» в CSS?
- Как использовать «маржу» в CSS?
- Как использовать «отступы» в CSS?
Когда использовать «заполнение» вместо «маржи» в CSS?
CSS ' прибыль ' и ' набивка » используются для разработки интерфейса. Они также используются для указания дополнительного промежутка или пространства между элементами. Однако эти два свойства отличаются друг от друга с точки зрения функциональности.
Здесь мы объясним некоторые различия между обоими свойствами:
| прибыль | набивка |
|---|---|
| margin обеспечивает пространство за пределами элемента. | padding обеспечивает пространство внутри содержимого элемента. |
| Мы можем установить поле элемента как « авто », чтобы автоматически установить поля вокруг элемента. | заполнение не может быть установлено как автоматическое. Пользователь должен указать значения для установки пространства внутри элемента. |
| Поля не повлияли на стиль элемента. | Когда мы применяем цвет фона к элементу, это повлияет на стиль элемента. |
| Мы можем установить как положительные, так и отрицательные значения полей. | padding поддерживает только положительные значения. |
Как использовать «маржу» в CSS?
Чтобы использовать « прибыль ', сначала создайте ' <дел> ” и назначьте класс. Например, мы назначили класс с именем « линукс ». Затем вставьте некоторый текст в тег абзаца « ”:
< див учебный класс знак равно 'линукс' >
< п > Linuxhint — один из лучших обучающих сайтов. < / п >
< / див >
Результат вышеприведенного кода приведен ниже:
Теперь создайте еще один « <дел> ' контейнер, имеющий класс ' маржа-div » и применить « стиль ” как “ граница: 1px сплошной черный ». После этого добавьте текст в поле « ' тег:
< див учебный класс знак равно 'margin-div' стиль знак равно 'граница: 1px сплошной черный' >
< п >Linuxhint — один из лучших обучающих сайтов.< бр >
< / п >
< див >
Вывод
Теперь примените свойство «margin» к классу «.margin-div»:
.margin-div {задний план- цвет : RGB ( 199 , 238 , 205 ) ;
шрифт- размер : Средняя;
граница : 3px RGB ( 114 , 250 , 114 ) ;
поле: 100 пикселей 100 пикселей 100 пикселей 100 пикселей;
}
В приведенном выше коде « .margin-div ” используется для доступа к элементу div для применения перечисленных ниже свойств:
- “ фоновый цвет ” используется для применения цвета к фону.
- “ размер шрифта ” используется для настройки размера шрифта.
- “ прибыль ” выделяет пространство за пределами элемента. Например, мы установили свойство «margin» как « 100 пикселей ».
Здесь вы можете видеть, что мы успешно установили « прибыль 'собственность на втором' див элемент:
Как использовать «отступы» в CSS?
Для использования свойства «заполнения» были использованы приведенные выше примеры. Во-вторых ' див 'контейнер, используйте класс ' padding-div », чтобы применить отступ:
< див учебный класс знак равно 'линукс' >< п > Linuxhint — один из лучших обучающих сайтов < / п >
< / див >
< див учебный класс знак равно 'заполнение-div' стиль знак равно 'граница: 1px сплошной черный' >
< п >Linuxhint — один из лучших обучающих сайтов.< бр >
< / п >
< / див >
Вывод
Чтобы применить отступы и другие свойства CSS к « .padding-div ”, взгляните на предоставленный код:
.padding-div {задний план- цвет : RGB ( 199 , 238 , 205 ) ;
шрифт- размер : Средняя;
отступ: 50px 50px 50px 50px;
}
В приведенном выше коде мы получили доступ ко второму « див » элемент с использованием класса « .padding-div ». Мы установили «цвет фона» и «размер шрифта». Более того, « набивка » используется для добавления пространства вокруг содержимого элемента с каждой стороны, как « 50 пикселей ».
Вывод
Мы объяснили различия и использование «отступов» и «маржи» в CSS.
Заключение
CSS « прибыль ” используется для установки интервала вокруг элемента, в то время как “ набивка ” используется для добавления интервала вокруг содержимого элемента. Чтобы применить свойство margin или padding, сначала создайте « див ” и укажите класс. После этого получите доступ к классу по имени класса и примените « прибыль ' и ' набивка ' характеристики. В этом посте объясняется использование полей и отступов в CSS.