CSS显示:内联vs内联块
在CSS中,display可以具有inline和的值inline-block.任何人都可以详细解释inline和之间的区别inline-block吗？
我到处搜索,最详细的解释告诉我inline-block被放置为inline,但表现得像block.但它没有解释究竟"表现为块"的含义.这有什么特别之处吗？
一个例子是更好的答案.谢谢.
Old*_*ool 1142
内联元素:
- 尊重左右边距和填充,但不是顶部和底部
- 不能设置宽度和高度
- 允许其他元素左右坐着.
- 在这里看到非常重要的附注.
块元素:
- 尊重所有这些
- 在块元素后强制换行
- 如果未定义宽度,则获取全宽
内联块元素:
- 允许其他元素左右坐着
- 尊重顶部和底部边距和填充
- 尊重高度和宽度
来自W3Schools:
内联元素在它之前或之后没有换行符,并且它允许旁边的HTML元素.
块元素在其上方和下方具有一些空格,并且不允许其旁边的任何HTML元素.
内联块元素被放置为内联元素(与相邻内容在同一行上),但它表现为块元素.
当您想象这个时,它看起来像这样:
- 我知道它已经过时了,但我会帮忙:"像块元素一样行事"是一种极其糟糕的措辞.我将进一步澄清:内联:可以在同一行之前或之后显示内容.block:需要自己的行,周围有空格.inline-block:可以在它之前或之后有元素,但是它周围有空格.所以内联块不是"内联但行为像块",它是两者的组合,正如名称所暗示的那样:在同一条线上,但有边框.合理？ (75认同)
- 需要注意的一个重要区别是`inline`元素可以从一行开始并包装到下一行,而`inline-block`元素将作为一个整体包装. (46认同)
- 我想你没有完全读完我的问题.我在问题中提到过,我知道它表现为块元素.我问的是"表现为块元素"是什么意思. (8认同)
- 我是html的新手.块元素不允许其旁边的任何元素.但是如果我们给下一个元素"内联",那么它将出现在我们的块元素旁边.因此,块元素容忍与否是没有意义的.它是否想要与先前的元素一致,这是下一个元素. (6认同)
- 如果您实际尝试它,它实际上允许它旁边的元素. (3认同)
- 内联元素也可以设置padding-top/bottom,虽然效果不是你想要的.请证实! (3认同)
- 任何人都可以给我一个用于`inline`而不是`inline-block`的用例？我已经创建了一个[小代码](https://codepen.io/AmirTugi/pen/WGZKAb)来模拟所有3个语音`display`值,我想不出一个我宁愿使用`inline的情况```inline-block`可以提供所有以上. (2认同)
- 我根据这个答案制作了[比较表](https://gist.github.com/Asheq/1ef5ec77b8e89c2c9da89d2b7a1cf8cb): (2认同)
| 归档时间： |
|
| 查看次数： |
507100 次 |
| 最近记录： |