Чем отличаются display block от inline и table css

display: block;

По умолчанию присвоен p, div, form, ul, h1 и т.д.

  1. на строку, на которой расположился блок, уже нельзя добавить другой элемент, даже когда остаётся пустое пространство. Искл., при применении свойств position, float, transform.
    <style type="text/css">
    .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; }
    .svetlyi { background-color: #fff; text-align: center; }
    </style>
    
    <div class="temnyi">
      <div class="svetlyi">А</div>
    </div>
    какой-то текст
    width: 30%;
    какой-то текст
  2. если не задано значение width, элемент растягивается на весь родительский контейнер.
    какой-то текст
    width: auto;
    какой-то текст
  3. если задано значение width, ширина складывается из margin, border, padding, width (подробнее). Поэтому красная рамка выходит за пределы родительского блока при width: 100%.
    какой-то текст
    width: 100%;
    border: 4px double red;
    какой-то текст
  4. если не задано значение height, элемент растягивается на высоту, необходимую содержимому блоку, иначе высота складывается из margin, border, padding, height.
  5. при превышении указанной высоты/ширины содержимое отображается поверх блока, коли не указано иное с помощью свойства overflow. В нашем случае красная рамка видна над голубой родительского блока.
  6. не действуют такие свойства, как vertical-align.
  7. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.
      Пример использования
<style type="text/css">
.raz { background-color: #ffff00; }
.raz li { background-color: #fff; }
.raz li a { background-color: #ccc; }
</style>

<ol class="raz">
  <li><a href="#on">маленькая</a></li>
  <li><a href="#on">с длинным текстом</a></li>
</ol>
  1. маленькая
  2. с длинным текстом
Для того, чтобы вся строка была ссылкой
<style type="text/css">
.raz { background-color: #ffff00; }
.raz li { background-color: #fff; }
.raz li a { background-color: #ccc; display: block; }
</style>
Уберём ненужные отступы (padding, margin), маркер (list-style) и подчёркивание (text-decoration) и добавим рамку (border)
<style type="text/css">
.raz { background-color: #ffff00; padding: 0; margin: 0; }
.raz li { background-color: #fff; padding: 0; margin: 0; list-style: none; }
.raz li a { background-color: #ccc; display: block; text-decoration: none; border: solid 1px; border-color:#46F #238 #238 #238; padding: 5px; }
</style>

display: inline;

По умолчанию присвоен a, span, b, em и т.д.

  1. элементы следуют друг за другом.
    <div class="temnyi">
      <span class="svetlyi">А</span>
    </div>
    какой-то текст прямоугольник А переносится на новую строку какой-то текст
  2. width и height игнорируются. Его ширина - это ширина содержимого плюс margin, border и padding.
  3. margin-top и margin-bottom игнорируются.
  4. совместно с padding-top и padding-bottom следует корректировать line-height, иначе строки будут "наезжать" друг на друга.
    <style type="text/css">
    .temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; }
    .svetlyi { padding: 10px; background-color: rgba( 255, 255, 255, 0.7); }
    </style>
    какой-то текст прямоугольник А переносится на новую строку и наезжает на соседние строки из-за установленного значения padding какой-то текст
  5. не может иметь text-align. Но при этом поддаётся его воздействию, если данное свойство задано родителю-блоку.
      Пример использования
Пробелы между тегами li нужно убирать. Когда разделяются слова пробелом, между ними появляется пустое пространство, здесь то же самое.
<style type="text/css">
.raz { background-color: #ffff00; padding: 0; margin: 0; }
.raz li { background-color: #fff; padding: 0; margin: 0; display: inline; }
.raz li a { background-color: #ccc; text-decoration: none; border: solid 1px; border-color: #46F #238 #238 #238; padding: 5px; line-height: 28px; }
</style>

<ol class="raz"><li><a href="#on">маленькая</a></li><li><a href="#on">с длинным текстом</a></li></ol>

display: inline-block;

По умолчанию присвоен img, input и т.д. По отношению к внешним элементам ведёт себя как inline, а внутренним block.

  1. элементы следуют друг за другом.
  2. имеет width и height, margin-top и margin-bottom.
    какой-то текст
    width: 40%;
    margin-top: 50px;
    display: inline-block;
    какой-то текст
  3. если не задано значение width (max-width), растягивается по ширине самого длинного элемента внутри. Удобно при использовании модального окна, где нужно уйти от фиксированных размеров, поскольку картинки могут быть совершенно разными.
    <style type="text/css">
    .temnyi { background-color: #4c6271; width:500px; text-align: center; font-size: 150%; border: 2px solid #0846cb; }
    .svetlyi { background-color: #fff; display: inline-block; padding: 10px; }
    </style>
    
    <div class="temnyi">
      <div class="svetlyi">
        <img src="URL-изо"/>
        название изо
      </div>
    </div>

    название изо
  4. на него можно воздействовать посредством text-align и vertical-align.
    <style type="text/css">
    .temnyi { background-color: #4c6271; width:500px; font-size: 150%; border: 2px solid #0846cb; }
    .temnyi div { background-color: #fff; width: 20%; margin: 5px; display: inline-block; vertical-align: top; }
    .temnyi div:nth-child(2) { width: 10%; }
    .temnyi div:nth-child(3) { width: 30%; }
    .temnyi div:nth-child(4) { width: 20%; }
    .temnyi div:nth-child(5) { width: 30%; }
    .temnyi div:nth-child(6) { width: 40%; }
    </style>
    
    <div class="temnyi">
      <div> 111 </div>
      <div> 2 </div>
      <div> 33 </div>
      <div> 4 </div>
      <div> 55 </div>
      <div> 6 </div>
    </div>
    1
    1
    1
    2
    3
    3
    4
    5
    5
    6
    Для сравнения тот же пример, но с float. Здесь нет разделения на две строки, блок 5 стоит под блоком 4.
    1
    1
    1
    2
    3
    3
    4
    5
    5
    6
      Пример использования
<style type="text/css">
.raz, .raz li { padding: 0; margin: 0; }
.raz li { display: inline-block; border: solid 1px; border-color: #46F #46F #238 #238; padding: 5px; vertical-align: top; max-width: 120px; }
.raz li a { text-decoration: none; display: block; height: 80px; line-height: 15px; }
.raz li a:after { display: block; text-align: center; }
.raz li:nth-child(1) a:after { content: url(http://www.blogger.com/img/icon_28_followers.png); }
.raz li:nth-child(2) a:after { content: url(http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif); }
</style>

<ol class="raz"><li><a href="#on">маленькая</a></li><li><a href="#on">с длинным текстом в две строки</a></li></ol>

display: list-item;

По умолчанию присвоен li. Элемент показан как блочный с маркером списка. Вид маркера изменяет свойство list-style. В примере выше маркер отсутствует, поскольку у li display отличный от list-item.

display: run-in;

Если после элемента с display в значении run-in следует блок, то он становится в одну строку с ним и является его частью. Иначе элемент вызывает разрыв строки. Не поддерживается Mozilla Firefox.

<style type="text/css">
.temnyi { background-color: #4c6271; width:500px; font-size: 130%; border: 2px solid #0846cb; }
.svetlyi { background-color: #fff; text-align: center; display: run-in; }
</style>

  <div class="svetlyi">А</div>
  <div class="temnyi">какой-то текст</div>
display: run-in;
вторая строка
какой-то текст

display: table;

По умолчанию присвоен table.

  1. на строку, на которой расположилась таблица, уже нельзя добавить другой элемент.
  2. если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из margin, border, padding, width. При превышении указанной высоты/ширины содержимое отображается поверх блока.
    какой-то текст
    width: auto;
    display: table;
    какой-то текст
  3. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.
  4. не действуют такие свойства, как vertical-align.
  5. применимы свойства border-collapse и border-spacing.

display: inline-table;

Аналогичен display: inline-block.

  1. применимы свойства border-collapse и border-spacing.

display: table-row;

По умолчанию присвоен tr. Объединяет группу ячеек, которые не будут перенесены на другую строку.

  1. на строку, на которой расположилась строка таблицы, уже нельзя добавить другой элемент.
  2. элемент растягивается по длине содержимого.
  3. width, border, padding, margin, vertical-align игнорируются.
  4. можно изменить значение height.
  5. не поддаются влиянию блоки, если у родителя text-align, только их содержимое.

display: table-cell;

По умолчанию присвоен td и th. Я рассматриваю ситуацию, когда родитель имеет display: table-row.

  1. элементы следуют друг за другом.
  2. если не задано значение width, элемент растягивается по длине содержимого, иначе ширина складывается из border, padding, width. Но не более ширины контейнера и пропорционально всем длинам ячеек. Поэтому я советую, не задавать width для ячеек нижних строчек.
  3. высота всех ячеек в строке одинакова и составляет высоту самой высокой ячейки. Удобно при построении двух- и т.д. колоночных макетов, где требуются колонки одинаковой высоты.
  4. margin игнорируется. Это свойство заменяется border-spacing у родителя.
  5. на его содержимое можно воздействовать посредством text-align и vertical-align.
<style type="text/css">
.temnyi { background-color: #4c6271; width:500px; font-size: 150%; border: 2px solid #0846cb; display: table; border-collapse: separate; border-spacing: 10px 7px; }
.temnyi > div { display: table-row; }
.temnyi > div > div { background-color: #fff; width: 20%; vertical-align: middle; display: table-cell; text-align: center; }
.temnyi > div > div:nth-child(2) { width: 10%; }
.temnyi > div > div:nth-child(3) { width: 30%; }
.temnyi > div > div:nth-child(4) { width: 20%; }
</style>

<div class="temnyi">
  <div>
    <div> 111 </div>
    <div> 2 </div>
    <div> 33 </div>
    <div> 4 </div>
  </div>
  <div>
    <div> 55 </div>
    <div> 6 </div>
  </div>
</div>
1
1
1
2
3
3
4
5
5
6

      Пример использования
<style type="text/css">
.raz { display: table; }
.raz div { display: table-row; }
.raz a, .raz span { display: table-cell; line-height: 15px; width: 120px; padding: 5px; background-color: #fff; border-left: 1px solid #46F; border-right: 1px solid #238; }
.raz div:nth-child(1) a { border-top: 1px solid #238; }
.raz span { border-bottom: 1px solid #238;  }
.raz div:nth-child(2) a, .raz span { text-align: center; vertical-align: middle; }
</style>

<div class="raz">
  <div>
    <a href="#on">маленькая</a>
    <a href="#on">с длинным текстом в две строки</a>
  </div>
  <div>
    <a href="#on"><img src="http://www.blogger.com/img/icon_28_followers.png"/></a>
    <a href="#on"><img src="http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif"/></a>
  </div>
  <div>
    <span>цена</span>
    <span>цена</span>
  </div>
</div>

display: table-caption (table-column, table-column-group, table-footer-group, table-header-group, table-row-group)

По умолчанию присвоен caption (col, colgroup, tfoot, thead, tbody). Пока не вижу практической ценности.

display: none;

Элемент становится невидимым, не сохраняя занимаемое место.

      Пример использования
<style type="text/css">
.raz, .raz li, .raz ol { padding: 0; margin: 0; list-style: none; }
.raz li a { background-color: #ccc; display: block; text-decoration: none; border: solid 1px; border-color:#46F #238 #238 #238; padding: 5px; }
.raz li a + ol { display: none; }
.raz li:hover a + ol { display: block; }
</style>

<ol class="raz">
<li><a href="#on">маленькая</a><ol>
<li><a href="#on">подпункт1</a></li>
<li><a href="#on">подпункт2</a></li>
</ol></li>
<li><a href="#on">с длинным текстом</a></li>
</ol>
  1. маленькая
    1. подпункт1
    2. подпункт2
  2. с длинным текстом
<style type="text/css">
.raz, .raz li, .raz ol { padding: 0; margin: 0; list-style: none; position: relative; }
.raz li a { background-color: #ccc; display: block; text-decoration: none; border: solid 1px; border-color:#46F #238 #238 #238; padding: 5px; }
.raz li input { position: absolute; right: 5px; top: 5px; }
.raz li input + ol { display: none; }
.raz li input:checked + ol { display: block; }
</style>

<ol class="raz">
<li><a href="#on">маленькая</a><input type="checkbox"/><ol>
<li><a href="#on">подпункт1</a></li>
<li><a href="#on">подпункт2</a></li>
</ol></li>
<li><a href="#on">с длинным текстом</a></li>
</ol>
  1. маленькая
    1. подпункт1
    2. подпункт2
  2. с длинным текстом
<style type="text/css">
.raz13, .raz13 li, .raz13 ol { padding: 0; margin: 0; list-style: none; position: relative; }
.raz13 ol { position: absolute; left: 0px; top: 25px; right: -200px; }
.raz13 > li { display: inline; }
.raz13 li a { background-color: #ccc; text-decoration: none; border: solid 1px; border-color: #46F #238 #238 #238; padding: 5px; line-height: 25px; }
.raz13 li ol { display: none; }
.raz13 li:hover ol { display: block; }
</style>

<ol class="raz13">
<li><a href="#on">маленькая</a><ol>
<li><a href="#on">подпункт1</a></li>
<li><a href="#on">подпункт2 длинный</a></li>
</ol>
</li><li><a href="#on">с длинным текстом</a></li>
</ol>
  1. маленькая
    1. подпункт1
    2. подпункт2 длинный
  2. с длинным текстом
в f t
наверх ↑

10 комментариев:

Marina Voronova
Привет) мне необходимо разместить два списка ul в одну строку. применяю к ul display: inline-block; но ничего не получается(
в чем м.б. ошибка?
NMitra
Привет. display: inline-block; нужно применять к li
Marina Voronova
а как тогда расположить два списка ul в одну строку?
применяю к ul display:block; но это не работает(
NMitra
Посмотрите про float: left; http://shpargalkablog.ru/2011/05/float-left-div-css.html
Возможно нужно это http://shpargalkablog.ru/2013/07/justify.html или это http://shpargalkablog.ru/2013/12/border.html#box-sizing-border-box (причины, почему съезжает элемент вниз). К последней ссылке http://shpargalkablog.ru/2013/01/skachet-menu.html
SelenIT
«display: inline-block; По умолчанию присвоен img, input и т.д.» — внешне оно так выглядит, но формально у них по умолчанию всё-таки display:inline. Просто это так называемые «замещаемые» элементы, для которых визуальное форматирование описано в отдельном подразделе спецификации. Но в Firefox, например, если картинка не загрузилась, то ее alt отображается как обычный текст, при необходимости переносясь на новую строку, как и должно быть при display:inline.
NMitra
Спасибо, Илья, очень важное замечание!
Анонимный
Здравствуйте, Наталья!

У меня есть один вопрос. Он относиться к описанию стиля "display: table-cell;"

Все ячейки, т.е. элементы "див" со стилем display:table-cell? имеют заданные индивидуальные величины ширины.
Ячейка1 - "111" - 20%
Ячейка2 - "2" - 10%
Ячейка3 - "33" - 30%
Ячейка4 - "4" - 20%

Итого: суммарно 80% от всей ширины содержащего их контейнера.
Вопрос: Почему в таком случае они заполняют весь контейнер? Смысл в таком случае устанавливать значения ширины?
NMitra
Здравствуйте. Это особенность таблицы. Сделайте ещё одну пустую ячейку или контейнеру с display: table; укажите максимально возможную ширину.
Анонимный
Здравствуйте. Спасибо за последний ответ.

Получается так: при указании максимальной ширины ( >=20%) для последней ячейки - все четыре предыдущие занимают свою ширину согласно задекларированным значениям, а последняя - всё оставшееся место.

Если же указать ширину последней ячейки меньше оставшегося пространства ( <20%), например - 5%, то ячейки "растягиваются" на всю ширину контейнера (по какому-то своему правилу для таблиц).

Вы можете указать пару ссылок на статьи в вашем стиле - в стиле шпаргалки (описание - пример), - где можно ознакомиться с пониманием того - как браузер будет отображать таблицу в том или ином случае. Скиньте, пожалуйста.

... или это только в Спецификацию?...

NMitra
Я не разбирала этот вопрос столь детально. Возьмите родителя, задайте ему display: table; и table-layout: fixed; Таблица будет вести себя более предсказуемо.