Блочная модель CSS
Էլեմենտների բլոկ մոդելը
Блочная модель — это способ браузера представлять элементы, которые он отображает в виде прямоугольных блоков. Они являются контейнерами и имеют некоторый контент: текст, изображение, другие дочерние элементы и т. д.
margin- внешняя граница элемента. Пустое пространство, отделяющее один элемент от другого или от краев окна браузера. Область внешней границы прозрачна и не имеет собственного цвета или другого эффекта.
border - окружность элемента, линия границы его сторон. Можно определить линию границы для всех четырех сторон или для одной стороны.
padding – это внутренний заряд элемента, который представляет собой пустое пространство между содержимым элемента и фреймом. Эта область также прозрачна и не имеет собственного цвета или другого эффекта.
պարունակությունը – большинство элементов имеют область содержимого, в которой размещаются текст, изображения, другие дочерние элементы и т. д.
Например:
p {
color: orange;
border: 2px solid red;
}
img {
margin: 20px;
border: 5px solid red;
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hayti</title>
<link rel="stylesheet" href="style.css">
<style data-no-auto-translation="">
</style>
</head>
<body>
<p>Привет, мир!!</p> <!-- <p> էլեմենտը զբաղեցնում է ամբողջ տողը:
-->
<img src= "html.png" >
</body>
</html>
В браузерах есть окно разработчика, которое можно открыть, нажав клавишу «f12», или следуя примеру:
Ներքին և արտաքին սահմաններ
Ներքին սահման(լիցք) – пустое пространство между содержимым элемента и рамкой. Для присвоения внутреннего заряда всем четырем сторонам элемента используется padding свойство.
Արտաքին սահման — пустое пространство, отделяющее элемент от другого элемента или от краев окна браузера. Используется для установки внешней границы всех четырех сторон элемента. margin свойство.
Padding и: margin свойства могут принимать от одного до четырех значений:
Padding: 10px 15px 22px 18px;
Margin: 10px 15px 22px 18px;
Значения устанавливаются по часовой стрелке, начиная сверху:
Значений 4, но при изменении количества меняется и порядок:
| Արժեքների քանակը | Արդյունքը |
|---|---|
|
Все 4 значения |
Значения задаются по часовой стрелке в верхнюю, правую, нижнюю и левую стороны. |
|
За стоимость 3 |
Первый относится к верхней стороне, второй — к левой и правой сторонам, а третий — к нижней. |
|
По стоимости 2 |
Первое значение предназначено для верхней и нижней сторон, второе — для левой и правой сторон. |
|
За одно значение |
Определяет для всех четырех сторон одновременно. |
По умолчанию браузер удаляет элементы по краям своего окна на определенную величину.
Без использования какой-либо внешней границы это будет выглядеть так:
Использование внешней и внутренней границы будет:
p {
border: 3px solid blue;
background-color: orange;
color: white;
padding: 15px; /* ներքին լիցք բոլոր չորս կողմերի համար */
margin: 25px; /* արտաքին սահման բոլոր չորս կողմերի համար */
}
<body>
<p>Привет, мир!!</p>
</body>
Russian 
Armenian