Jaka jest różnica między display: inline i display: inline-block?
Jaka jest dokładnie różnica pomiędzy wartościami inline
I inline-block
CSS display
?
4 answers
Odpowiedź wizualna
Wyobraź sobie <span>
element wewnątrz <div>
. Jeśli nadasz elementowi <span>
wysokość 100px i czerwoną ramkę, na przykład, będzie wyglądał tak z
Wyświetlacz: inline
Wyświetlacz: inline-block
Display: block
Kod: http://jsfiddle.net/Mta2b/
Elementy z display:inline-block
są jak display:inline
elementy, ale może mieć szerokość i wysokość. Oznacza to, że można użyć elementu inline-block jako bloku podczas przesyłania go w tekście lub innych elementach.
Różnica obsługiwanych stylów jako podsumowanie:
-
inline: tylko
margin-left
,margin-right
,padding-left
,padding-right
-
inline-block:
margin
,padding
,height
,width
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-07 10:49:22
display: inline;
jest trybem wyświetlania używanym w zdaniu. Na przykład, jeśli masz akapit i chcesz wyróżnić jedno słowo, robisz to:
<p>
Pellentesque habitant morbi <em>tristique</em> senectus
et netus et malesuada fames ac turpis egestas.
</p>
Element <em>
ma domyślnie display: inline;
, Ponieważ ten znacznik jest zawsze używany w zdaniu.
Element <p>
ma domyślnie display: block;
, ponieważ nie jest ani zdaniem, ani w zdaniu, jest blokiem zdań.
Element z display: inline;
nie może mieć height
lub width
lub pionowego margin
. Element z display: block;
Może mieć width
, height
i margin
.
Jeśli chcesz dodać height
do elementu <em>
, Musisz ustawić ten element na display: inline-block;
. Teraz możesz dodać height
do elementu i każdego innego stylu bloku ({[18] } część inline-block
), ale jest on umieszczony w zdaniu (inline
część inline-block
).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-27 20:13:28
Jedna rzecz nie wymieniona w odpowiedziach to element inline może rozbijać się między liniami, podczas gdy inline-block nie może (i oczywiście blokuje)! Tak więc elementy inline mogą być przydatne do stylizacji zdań tekstu i bloków wewnątrz nich, ale ponieważ nie mogą być wyściełane, możesz zamiast tego użyć line-height .
<div style="width: 350px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div style="display: inline; background: #F00; color: #FFF">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <div style="display: inline-block; background: #F00; color: #FFF">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-24 07:23:49
Wszystkie powyższe odpowiedzi dostarczają ważnych informacji na pierwotne pytanie.
Istnieje jednak uogólnienie, które wydaje się błędne.
Możliwe jest , aby ustawić szerokość i wysokość na co najmniej jeden (myślę o) element inline.
Zarówno akceptowane odpowiedzi tutaj i na Ten duplikat stwierdzają, że nie jest to możliwe, ale wydaje się to nie być ważną ogólną zasadą.
Przykład?<img src="#" />
img {
width: 200px;
height: 200px;
border= 1px solid red;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-14 14:33:07