display

Свойство display позволяет управлять видимостью объекта и другим характеристикам. Например, значение block превращает строчный элемент в блочный.

Значение inline делает обратную задачу - превращает блочный элемент в строчный. Применим к заголовку и параграфу. Они будут выводиться в одну строчку.

Строчный заголовок h5

Строчный параграф p

<style>
.dstyle_inline{
    display:inline;
}
</style>

<h5 class="dstyle_inline">Строчный заголовок h5</h5>

<p class="dstyle_inline">Строчный параграф p</p>

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

Обратите внимание, что объект не только становится невидимым, под него не резервируется место - как будто его там и нет. В этом основное отличие от visibility:hidden, который прячем объект, но место под него сохраняется.

Есть и другие свойства. Например, table-cell, который создаёт эффект таблицы.

Первый параграф

Второй параграф

.dstyle_table{
    display:table-cell;
}

<p class="dstyle_table">Первый параграф</p>
<p class="dstyle_table">Второй параграф</p>

Реклама