Блочная модель CSS

Что такое встроенные и блочные элементы

В этой статье мы поговорим о блочной модели, о разнице между встроенными и блочными элементами. А также, как мы можем заставить встроенные элементы отображаться как блочные элементы или иметь свойства обоих.

Подписывайтесь на нас:

YouTube: https://www.youtube.com/channel/UCu4-4FnutvSHVo9WHvq80Ww?sub_confirmation=1

Среда: https://ckmobile.medium.com/

Удеми: https://www.udemy.com/user/cyruschan2/

Linkedin: https://www.linkedin.com/company/ckmobi/

Телеграмма: https://t.me/ckmobi

Твиттер: https://twitter.com/ckmobilejavasc1

Коробчатая модель

В мире CSS блочная модель представляет собой контейнер, содержащий такие свойства, как поля, границы, отступы и сам контент.

Разница между границей и отступом

граница: пространство между границей и границей, оно используется для разделения двух элементов.

padding: пространство между содержимым и границей, оно используется, чтобы оставить некоторое пространство между содержимым и границей.

Что такое встроенные элементы и блочные элементы?

Строчные элементы включают ‹a› и ‹span›.

Элементы блока включают ‹div› и ‹p›

Основное отличие заключается в том, что блочные элементы всегда начинаются с новой строки и занимают всю ширину. В то время как встроенные элементы не начинают новую строку, а занимают только необходимую ширину.

Блочные элементы имеют верхнее и нижнее поле, а встроенные элементы — нет.

Давайте создадим проект, чтобы продемонстрировать это.

Создайте index.html и style.css. Внутри index.html мы поместили 3 элемента тега p и 3 элемента тега a.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<a href="#">link</a>
<a href="#">link</a>
</body>
</html>

Когда мы применяем следующий стиль

p,a{
border-style: solid;
}

Мы видим, что абзац займет всю ширину и начнет новую строку, в то время как элемент тега займет только необходимую ширину и не начнет новую строку.

Допуск

Если мы продолжим добавлять поля, мы увидим, что встроенные элементы имеют только верхнее и нижнее поля.

p,a{
border-style: solid;
margin:30px;
}

ширина

Встроенному блоку не разрешено устанавливать ширину, поэтому, например, если мы создадим такой css, не имеет значения, будет ли ширина 60px или 600px. Ширина элемента тега «a» остается прежней.

p,a{
border-style: solid;
margin:30px;
padding:30px;
width:60px;
}

Отображать

Чтобы тег «a» также имел поведение блочного элемента, мы можем изменить отображение на блочное.

p,a{
border-style: solid;
margin:30px;
padding:30px;
display:block;
}

Мы также можем объединить лучшее из обоих миров, используя встроенный блок. Таким образом, у него есть поля сверху и снизу, контролируйте ширину, которые являются свойствами элементов блока. Но он также не будет начинать новую строку, которая является свойством встроенных элементов блока.