CSS: Убираем отступы у списка ссылок

среда, 1 декабря 2010 г.

CSS: Убираем отступы у списка ссылок

При создании блока со списком ссылок обычно рекомендуется использовать свойство display с атрибутами block или inline-block, что позволит увеличить размер активного поля ссылки. Большие активные поля ссылок улучшают юзабилити элементов, по крупным элементам проще попасть мышью.

Элементы с display: block отображается как блочный.

Элемент с display: inline-block отображается как блочный элемент, который обтекается другими элементами, как встроенный. Содержимое отформатировано как блочный элемент, а сам элемент отформатирован как встроенный.

Рассмотрим простой пример со списком ссылок:

<ul> 
<li><a href="#">This little</a></li> 
<li><a href="#">piggy went to</a></li> 
<li><a href="#">market</a></li> 
</ul>

Если не изменять стиль ссылок, то размер их активных полей соответствую размеру текста внутри них.

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

ul a { display: block; }

Мы можем сделать ещё лучше.

Убедитесь, что у элементов списка отсутствуют поля, в отличии от ссылок.
Ссылки не имеют внешних отступов, так как эти отступы не являются активной областью элементов.

ul li { padding: 0; margin: 0; } 
ul a { padding: 5px; display: block; }

Статья и состоит из очевидных вещей, но мы довольно часто можем встретить на просторах интернета блоки ссылок не «обезображенные» увеличенными активными полями.

Оригинал статьи: Keep Margins Out of Link Lists By: Chris Coyier on 11/29/2010