css inline, block, inline-block的区别

素颜马尾好姑娘i 2022-11-21 04:27 224阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th>区别</th> 
   <th><code>inline</code></th> 
   <th><code>block</code></th> 
   <th><code>inline-block</code></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>名称</strong></td> 
   <td><font>内联元素</font></td> 
   <td><font>块级元素</font></td> 
   <td>内联块</td> 
  </tr> 
  <tr> 
   <td><strong>换行</strong></td> 
   <td><font>不换行，多个内联元素排列在一行，直至空间不够才换行</font></td> 
   <td><font>独占一行</font></td> 
   <td><font>与内联元素相同</font></td> 
  </tr> 
  <tr> 
   <td><strong>大小</strong></td> 
   <td><font>只与内容有关，无法通过<code>width</code>/<code>height</code>修改大小</font></td> 
   <td><font>可以使用<code>width</code>/<code>height</code>设置</font></td> 
   <td><font>与块级元素相同</font></td> 
  </tr> 
  <tr> 
   <td><strong>边距</strong></td> 
   <td><font>只可设置水平方向的<code>margin</code>, <code>padding</code></font></td> 
   <td><font>可设置</font></td> 
   <td><font>与块级元素相同</font></td> 
  </tr> 
 </tbody> 
</table>

补充：

1.  块级元素即使设置了宽度，也会独占一行
2.  内联元素设置垂直方向的`padding`时，`background-color` 会标识其 `padding` 区域，但元素高度不会发生变化，也就是不会再垂直方向上“挤压”到其他元素

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS中display:inline 和 inline-block的区别

首先看看来自chatgpt的回答： > `inline` 和 `inline-block` 是两种 CSS 属性值，它们都用于控制元素在水平方向上排列，并与文本流中的其他元素

左手的ㄟ右手/ 2023年10月15日 21:43/ 0 赞/ 2 阅读

相关 CSS中display：block、inline、inline-block

display:block的特点： 1、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 2、block元

朱雀/ 2023年01月02日 07:28/ 0 赞/ 105 阅读

相关 css中display：inline-block与display：inline的区别

1、为了便于观察两者的区别，先设置一个起始样式。 <div class="wrap"> <div style="background-c

本是古典何须时尚/ 2022年12月17日 15:52/ 0 赞/ 212 阅读

相关 css inline, block, inline-block的区别

<table> <thead> <tr> <th>区别</th> <th><code>inline</code></th> <th><code

素颜马尾好姑娘i/ 2022年11月21日 04:27/ 0 赞/ 225 阅读

相关 CSS的inline、block与inline-block

CSS的inline、block与inline-block > 推荐一篇文章，说的很清楚 [https://segmentfault.com/a/11900000152

ゞ浴缸里的玫瑰/ 2022年11月13日 06:23/ 0 赞/ 269 阅读

相关 display的inline、block、inline-block 的区别

1、display:block就是将元素显示为块级元素 block元素的特点是：　　总是在新行上开始；　　高度，行高以及顶和底边距都可控制；　　宽度缺省是

秒速五厘米/ 2022年09月25日 07:23/ 0 赞/ 166 阅读

相关 block、inline-block、inline的区别

1、display:block是指该元素变为块级元素，独占一行，可以设置height、width属性，也可以设置margin、padding属性 2、display：inli

青旅半醒/ 2022年07月15日 12:24/ 0 赞/ 207 阅读

相关 block、inline-block、inline的区别

1、display:block是指该元素变为块级元素，独占一行，可以设置height、width属性，也可以设置margin、padding属性 2、display：inli

逃离我推掉我的手/ 2022年07月15日 12:24/ 0 赞/ 185 阅读

相关 display:inline、block、inline-block的区别？

`display：block;` 就是将元素显示为块级元素。 `block`元素的特点是： 1. 总是在新行上开始； 2. 高度，行高以及顶和底边距都可控制； 3.

待我称王封你为后i/ 2021年07月04日 23:03/ 0 赞/ 390 阅读

相关探究CSS display:inline|block|inline-block差异

你知道CSS display:inline|block|inline-block三者的区别吗，这里向大家简单介绍一下，block就是将元素显示为块级元素；inline就是将元

一时失言乱红尘/ 2021年06月24日 14:35/ 0 赞/ 355 阅读