Home / Questions / 24964
Accepted
Hoose
Asked: 2020-09-25 20:45:32 +0800 CST 2020-09-25 20:45:32 +0800 CST

В чем разница между display: block, display: inline и display: inline-block?

  • 772

Я обнаружил несколько сомнений по поводу разницы при работе с этими типами элементов в CSS.

Так в чем же разница между этими элементами?

html

1 Answers

  1. Best Answer

    Резюме

    • встроенный: показывает все элементы на одной линии (относительно потока) и не принимает свойства ширины, высоты или вертикальных полей.
    • блок: отображает элементы в отдельных строках и принимает свойства ширины, высоты и вертикальных полей.
    • встроенный блок: его поведение представляет собой смесь двух предыдущих, все элементы отображаются в одной строке (с учетом потока), а также он принимает свойства ширины, высоты и вертикальных полей.

    Проще говоря, на определенные теги HTML не влияет поток других элементов, они просто ограничены их естественным использованием.

    Встроенные или встроенные элементы

    Строковые элементы, определенные HTML: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select. , маленький, промежуток, забастовка, сильный, саб, суп, текстовая область, тт, у, вар.

    Примером этих тегов может быть <a>, <em>и, возможно, самый полезный из всех <span>, все эти элементы называются «встроенными», потому что по умолчанию они несут свои display: inline, без необходимости указывать их в документе CSS.

    Представьте, что у нас есть следующий сценарий:

    .box {
	background-color: tomato;
	border: 1px solid black;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 50px 10px;
}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>
<span class="box">CAJA 1</span>
<a class="box" href="#">CAJA 2</a>
<span class="box">CAJA 3</span>
<em class="box">CAJA 4</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>

    Как мы видим, все X-боксы имеют встроенное свойство (несмотря на то, что они не определены в CSS), и они выравниваются друг с другом, но ширина, высота и тем более вертикальные поля не учитываются.

    Блочные или блочные элементы

    Наоборот, есть блочные элементы, которые не смешиваются с остальными элементами, а отображаются отдельными «линиями».

    Элементы блока, определенные HTML: адрес, цитата, центр, каталог, div, dl, набор полей, форма, h1, h2, h3, h4, h5, h6, hr, isindex, меню, noframes, noscript, ol, p, pre, table, ul, dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.

    Вернувшись к тому же сценарию, но заменив встроенные элементы на блочные, мы получим следующий результат:

    .box {
	background-color: tomato;
	border: 1px solid black;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 50px 10px;
}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>
<div class="box">CAJA 1</div>
<h6 class="box">CAJA 2</h6>
<div class="box">CAJA 3</div>
<pre class="box">CAJA 4</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>

    Как я уже упоминал, теперь элементы блока отображаются в виде независимых «строк», но, прежде всего, они уже учитывают ширину, высоту и вертикальные поля.

    Встроенный блок или встроенный блок

    Мы только что рассмотрели блочные и встроенные элементы, теперь пришло время перейти к встроенному блочному элементу.

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

    .box {
    display: inline-block;
	background-color: tomato;
	border: 1px solid black;
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 50px 10px;
}
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>
<span class="box">CAJA 1</span>
<a class="box" href="#">CAJA 2</a>
<span class="box">CAJA 3</span>
<em class="box">CAJA 4</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aliquam tortor turpis, convallis eget suscipit vel, eleifend
  tincidunt orci. Quisque ac.</p>

    • 11