среда, 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; } 

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

  1. Убедитесь, что у элементов списка отсутствуют поля, в отличии от ссылок.
  2. Ссылки не имеют внешних отступов, так как эти отступы не являются активной областью элементов.
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


CSS. Каскадные таблицы стилей. Подробное руководство | Эрик А. Мейер | Cascading Style Sheets: The Definitive GuideCSS. Каскадные таблицы стилей. Подробное руководство | Эрик А. Мейер | Cascading Style Sheets: The Definitive Guide
CSS. Рецепты программирования | Кристофер Шмитт | CSS: CookbookCSS. Рецепты программирования | Кристофер Шмитт | CSS: Cookbook
CSS. 100 и 1 совет | Рейчел Эндрю | The CSS Anthology: 101 Essential Tips, Tricks & Hacks | High Tech

Похожие по тематике посты:

Комментариев нет: