Узнайте, как элементы на странице располагаются, отступы, поля, границы упрощены
Что такое блочная модель в CSS?
В HTML все элементы можно рассматривать как блоки.
Блочная модель — это, по сути, коробка, состоящая из
→ Маржа
→ Граница
→Заполнение
→Контент
Графическое представление блочной модели CSS можно понять по этому изображению
📌Контент
По сути, это самый внутренний блок, содержащий весь текст, изображения, кнопки и т. д., которые вы хотите разместить на своем веб-сайте.
Он содержит основной HTML-контент. Отличный способ написать контент на вашей странице — использовать div для игры с дизайном веб-сайта.
📌Подкладка
Это прозрачность вокруг содержимого. В основном это отделяет содержимое от границы, очищая область вокруг содержимого.
Отступы можно изменить со всех четырех сторон содержимого, то есть сверху, справа, снизу и слева.
пример: - div{ padding: 10px;
📌Граница
Это область вокруг заполнения и содержимого, используемая для определения границ содержимого.
Это пространство между полем и отступом, которое можно изменить с помощью CSS, чтобы добавить стиль Ultimate.
пример: - граница div{: 2 пикселя сплошного фиолетового цвета;
📌Маржа
Точно так же, как отступы, также являются прозрачной чистой областью вокруг содержимого за пределами границы.
Поле используется для отделения содержимого поля от другого содержимого на той же странице.
пример: - div{ margin: 22px;
Пример-
— — — — Код — — — —
- - - - Выход- - - -
И вот оно! Большое спасибо за упорство до конца этой статьи! Надеюсь, вы нашли это полезным. вы можете следовать за мной на среде.
вы также можете поддержать меня здесь👉https://twitter.com/harsh_kashiwal
