Page Title

CSS

Блочные - строчные.
В чем разница? Зачем блочный элемент делать строчным, или наоборот?

Давайте возьмем тег P( он у нас блочный элемент) и запишем в него
"хороший день".

Снизу я запишу в тег Р нашу фразу, и с помощью стилей я задам тегу Р фоновый цвет aqua.

Хороший день

Что мы видим? Что тег Р на всю ширину покрасил фон. То есть он как блочный элемент занимает всю строку на которой находится.

Теперь я сделаю наш тег Р блочно-строчным элементом. В этом мне поможет следующее свойство ;

p {
background-color: orange;
display: inline-block; (делает наш элемент блочно строчным)
}

Я добавил это свойство в наши стили к тегу Р. Теперь посмотрим как он себя ведет когда он является строчным элементом.

Хороший день

Что мы видим? Когда наш тег Р был блочным элементом он занял всю строчку.
Когда он стал строчным элементом, то занял лишь столько места, сколько ему отведено.

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

Попробуем это сделать когда они будут блочными, а потом сделаем тоже самое только уже сделаем их строчными.

первый блок

второй блок

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

первый блок

второй блок

Наши блоки стали рядом. Наше значение display: inline-block делает элемент не строчным, а блочно строчным. Если перевести что либо в строчный элемент, то ширину и другие размеры мы им не зададим.

Давай я покажу что будет если я пропишу нашему блоку dispaly: inline; то есть сделаю его строчным.

первый блок

Элемент потерял свои размеры, ширину и другие свойства которые я задал в css. Поэтому прописывам мы не dispaly:inline; а display:inlile-block; Иногда строчный элемент нужно перевести в блочный, иногда наоборот.

Это свойство очень часто используется.

Теперь давайте сделаем все наоборот. Мы сделаем строчный элемент, блочно строчным.
Например у нас есть ссылка (тег a)- он является строчным элементом.

И мы хотим этой ссылке сделать задний фон, в общем хотим ее красиво оформить.
Я добавлю ссылку, а так же добавлю ей задний фон(черного цвета) и размеры в 100 пикселей на 50.

Сейчас я задал вот такие свойства в css;

a {
background-color: black;
color: orange;
text-decoration: none;
width: 100px;
height: 50px;
border-radius: 20px;
}

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

ссылка

Теперь в наши свойства в css я добавлю display: inline-block; и смотрим на результат.

ссылка

Когда наш элемент из строчного превратился в блочно строчный, к нему преминились мои размеры. Так же я добавил свойства line-hight ( выравнивание текста по высоте) и text-align: center; текст в центре по ширине блока.

Наш код в сss;

a {
display: inline-block;
background-color: black;
color: orange;
text-decoration: none;
width: 100px;
height: 50px;
border-radius: 20px;
line-height: 50px;
text-align: center;
}

Урок (блочные, строчные)