alexilin

Пробовали ли вы когда-нибудь добавить внутренние отступы у элементов списка, которым было присвоено свойство display со значением inline? Заметили что отступы выглядят немного необычно? Посмотрите на пример ниже:

• Первый элемент
• Второй элемент
• Третий элемент
• Четвертый элемент
• Пятый элемент
• Шестой элемент
• Седьмой элемент
• Восьмой элемент
• Девятый элемент
• Десятый элемент
• Одиннадцатый элемент
• Двенадцатый элемент

Каждому элементу добавлен внутренний отступ равный 1em. Однако верхний и нижний отступы отсутствуют и элементы перекрывают друг друга.

Чтобы понять почему это происходит давайте посмотрим на различные варианты того как инлайновые элементы воспринимают такие свойства как width, height, padding и margin.

Если вы попытаетесь задать некоторые из этих свойств инлайновому элементу, одни из них будут применены, другие будут применены частично, а некоторые будут полностью проигнорированы.

Свойство width

В спецификации CSS2 сказано, что к инлайновым элементам нельзя применять свойство width.

В примере, приведенном ниже ссылке была установлена ширина равная 200px. Как вы видите, это не повлияло на окружающее содержимое и ширина осталась прежней:

После триумфа «Зенита» корреспонденты Sport.ru отловили в микст-зоне добрую половину питерской команды и собрали впечатления о прошедшей игре. Их мы вам и представляем….

Свойство height

Спецификация CSS2 опять же говорит, что инлайновым элементам нельзя применять свойство height, а высота может быть установлена с помощью свойства line-height.

В примере, приведенном ниже, ссылке была задана высота равная 50px. Как вы видите, снова никакой реакции:

После триумфа «Зенита» корреспонденты Sport.ru отловили в микст-зоне добрую половину питерской команды и собрали впечатления о прошедшей игре. Их мы вам и представляем….

Свойство padding

Применив свойство padding к инлайновому элементу вы обнаружите, что только левый и правый отступы повлияют на окружающий контент. В примере, приведенном ниже, ссылке был задан внутренний отступ равный 50px:

После триумфа «Зенита» корреспонденты Sport.ru отловили в микст-зоне добрую половину питерской команды и собрали впечатления о прошедшей игре. Их мы вам и представляем….

Свойство margin

Свойство margin действует на инлайновые элементы так же как и padding. В примере, приведенном ниже, ссылке был задан внешний отступ равный 50px:

После триумфа «Зенита» корреспонденты Sport.ru отловили в микст-зоне добрую половину питерской команды и собрали впечатления о прошедшей игре. Их мы вам и представляем….

Изменение свойства display с inline на block

В CSS есть возможность поменять свойство display у инлайнового элемента и установить ему значение block. Это придаст элементу вид и свойства блочного элемента.

Например в следующем примере свойству display у ссылки было установлено значение block. И теперь такие свойства, как width, height, margin и padding действуют так, как если бы это был блочный элемент.

После триумфа «Зенита» корреспонденты Sport.ru отловили в микст-зоне добрую половину питерской команды и собрали впечатления о прошедшей игре. Их мы вам и представляем….

Вы также можете изменить вид блочных элементов, придав им свойства инлайновых. Вот почему внутренние верхний и нижний отступы не работали в примере в начале статьи…

Чтобы заставить элементы списка располагаться на одной линии и при этом не перекрывать друг друга следует у элементов убрать значение «inline» свойства display. Элементы списка это блочные элементы, так что специально присваивать значение block не нужно.

• Первый элемент
• Второй элемент
• Третий элемент
• Четвертый элемент
• Пятый элемент
• Шестой элемент
• Седьмой элемент
• Восьмой элемент
• Девятый элемент
• Десятый элемент
• Одиннадцатый элемент
• Двенадцатый элемент

Затем нужно прописать элементам списка свойство float со значением left, для того чтобы элементы располагались на одной линии.

• Первый элемент
• Второй элемент
• Третий элемент
• Четвертый элемент
• Пятый элемент
• Шестой элемент
• Седьмой элемент
• Восьмой элемент
• Девятый элемент
• Десятый элемент
• Одиннадцатый элемент
• Двенадцатый элемент

Оригинал: Inline elements and padding