Разница между inline и inline-block

[aaron]

Подскажите новичку.

Стоит задача создать горизонтальное меню.

Имеются такие строки:

ul li {

...

display:inline;

...

}

А чем отличается вышеприведенная строка от следующей:

ul li {

...

display:inline-block;

...

}

[Great Rash]

Пожалуй вам стоит начать с самых азов.

[aaron]

Пожалуй вам стоит начать с самых азов.

inline - это строковый элемент, inline-block - строчно-блочный элемент. Азы я знаю. Может даже больше, чем нужно на начальном этапе (как мне кажется).

А вот с практикой у меня дела обстоят гораздо хуже.

Пытаюсь верстать по готовому примеру. И в чужом коде увидел, что горизонтальное меню делается таким образом:

display:inline-block

Во всех учебниках и у Мержевича горизонтальное меню создается через:

display:inline

Так понимаю, что в первом случае элементы li представляют из себя блочные элементы, а во втором случае - просто строка.

В первом случае тогда мне нет необходимости дописывать:

ul li a {

display:block

}

Я правильно понимаю?

Edited July 30, 2012 by aaron

[hedgehog]

inline - это строковый элемент, inline-block - строчно-блочный элемент. Азы я знаю. Может даже больше, чем нужно на начальном этапе (как мне кажется).

А вот с практикой у меня дела обстоят гораздо хуже.

Пытаюсь верстать по готовому примеру. И в чужом коде увидел, что горизонтальное меню делается таким образом:

display:inline-block

Во всех учебниках и у Мержевича горизонтальное меню создается через:

display:inline

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

Так понимаю, что в первом случае элементы li представляют из себя блочные элементы, а во втором случае - просто строка.

В первом случае тогда мне нет необходимости дописывать:

ul li a {

display:block

}

Я правильно понимаю?

Наверное, все-таки лучше действительно начать с азов, чтобы понимать, что происходит, а не заучивать "если у родителя inline, значит - у потомка display:block" (что, кстати, никак друг от друга не зависит, а только от ситуации). И вообще, не понятно откуда такой вывод сделан

Edited July 30, 2012 by hedgehog

[aaron]

inline - это строковый элемент, inline-block - строчно-блочный элемент. Азы я знаю. Может даже больше, чем нужно на начальном этапе (как мне кажется).

А вот с практикой у меня дела обстоят гораздо хуже.

Пытаюсь верстать по готовому примеру. И в чужом коде увидел, что горизонтальное меню делается таким образом:

display:inline-block

Во всех учебниках и у Мержевича горизонтальное меню создается через:

display:inline

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

Так понимаю, что в первом случае элементы li представляют из себя блочные элементы, а во втором случае - просто строка.

В первом случае тогда мне нет необходимости дописывать:

ul li a {

display:block

}

Я правильно понимаю?

Наверное, все-таки лучше действительно начать с азов, чтобы понимать, что происходит, а не заучивать "если у родителя inline, значит - у потомка display:block" (что, кстати, никак друг от друга не зависит, а только от ситуации). И вообще, не понятно откуда такой вывод сделан

Мда... Значит, действительно еще не все знаю... Печально... (((

[SelenIT]

inline - это строковый элемент, inline-block - строчно-блочный элемент.

Имхо, лучше думать о нем как о внутристрочном блоке или блоке, встраиваемом (встроенном) в строку. Как картинка или кнопка.

Так понимаю, что в первом случае элементы li представляют из себя блочные элементы, а во втором случае - просто строка.

В первом случае тогда мне нет необходимости дописывать:

ul li a {

display:block

}

Я правильно понимаю?

Нет. Как раз в случае встроенных блоков дописывать это имеет смысл (если надо сделать кликабельной всю ширину пункта меню). А при inline это, как правило, бессмысленно — блок, насильно впихнутый посреди строки обычного текста, попросту разорвет ее.

Наглядный пример разницы: http://jsfiddle.net/4NrXF/

[aaron]

Меня поражает тот факт, что когда учил CSS - да, было тяжеловато сначала, но потом освоил. Перечитал горы литературы (Мержевич - всю его литературу, Тиге, половину Рейчел и Мейера и еще других авторов), пересмотрел видеокурсы ("Специалист", Попов), накопал в Инете видеоуроки по верстке (хотя их и мало как таковых). Считал, что теоретически создал для себя более чем хорошую основу.

А вот попробовал самостоятельно свертать (пускай и по готовому примеру) что-то - и все! Как будто ничего и не учил, ничего и не знаю вообще. Вроде смотришь на макет - ага, здесь все просто, там так сделать, тут так.

А начинаешь делать - то одно не получается, то другое не знаешь как правильно или вообще не знаешь как сделать.

Firebug еще только хорошо помогает изучить готовый шаблон, разобраться, что к чему.

(((

Edited July 30, 2012 by aaron

[aaron]

inline - это строковый элемент, inline-block - строчно-блочный элемент.

Имхо, лучше думать о нем как о внутристрочном блоке или блоке, встраиваемом (встроенном) в строку. Как картинка или кнопка.

Так понимаю, что в первом случае элементы li представляют из себя блочные элементы, а во втором случае - просто строка.

В первом случае тогда мне нет необходимости дописывать:

ul li a {

display:block

}

Я правильно понимаю?

Нет. Как раз в случае встроенных блоков дописывать это имеет смысл (если надо сделать кликабельной всю ширину пункта меню). А при inline это, как правило, бессмысленно — блок, насильно впихнутый посреди строки обычного текста, попросту разорвет ее.

Наглядный пример разницы: http://jsfiddle.net/4NrXF/

Спасибо за простое и доступное объяснение.