Свойство display

Так же, как каждый элемент обладает свойством position, у каждого элемента есть и свойство display. Несмотря на довольно большое число допустимых значений этого свойства, наиболее распространенными являются block или inline, большинство остальных значений свойства display относятся к таблицам. Разница между block и inline довольно проста:

• блочные элементы со значением block - абзацы, заголовки и списки - располагаются каждый на новой строке;

• строчные элементы, со значением inline - a, span, img - располагаются друг рядом с другом и переносятся на новую строку только в случае нехватки места на предыдущей.

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

Кроме того, стоит упомянуть еще одно допустимое значение свойства display - none. С его помощью мы можем сделать любой элемент, и содержащиеся внутри него элементы невидимыми пользователю. Занимаемое такими элементами пространство освобождается. Обратите внимание, что при использовании свойства visibility со значениями visible и hidden элемент просто скрывается от глаз пользователя, но занимаемое им пространство остается.