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

本是古典何须时尚 2022-12-17 15:52 199阅读 0赞

## 1、为了便于观察两者的区别，先设置一个起始样式。 ##

.wrap>div{ 
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
            }

起始页面显示如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center]

## 2、添加display: inline之后 ##

.wrap>div{ 
                width: 100px;
                height: 100px;
                display: inline;
                line-height: 100px;
                text-align: center;
            }

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随 **元素的内容** 而变化。

可以看到 inline元素设置width, height属性 **无效**，没有产生效果，实际上使用此属性后，元素会被显示为内联元素，具有内联元素的属性。

**inline元素的margin和padding属性：**  
水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；  
竖直方向的padding-top, padding-bottom也可以产生效果，但是margin-top, margin-bottom不会产生边距效果。

![在这里插入图片描述][2020102411094314.png_pic_center]  
**附：**  
inline元素的上下间距是通过文字行高（line—height）设置的，实质上还是文字高度撑开元素容器产生的效果。

![在这里插入图片描述][20201024113712524.png_pic_center]

## 3、添加display: inline-block之后 ##

.wrap>div{ 
                width: 100px;
                height: 100px;
                display: inline-block;
                line-height: 100px;
                text-align: center;
            }

简单来说就是将对象呈现为 inline 对象，但是对象的内容作为 block 对象呈现，使用此属性后，元素会被现实为块级元素， inline-block 元素设置 width, height 属性 **生效**。之后的内联对象会被排列在同一行内，既具有 block 的宽度高度特性又具有 inline 的同行特性。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 2]  
小总结：不管是使用inline-block还是inline，左右都会产生一个小间距，可能这就是为什么margin-left, margin-right可以改变，而margin-top, margin-bottom只能是默认值且不能改变吧。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/3eec1996cfc249bcb98f17f67f597c2a.png
[2020102411094314.png_pic_center]: /images/20221122/5c15a61e4ed94d41ad7a9e331494deec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221122/9de446fcc4a14948a7649bd2cf3ab161.png
[20201024113712524.png_pic_center]: /images/20221122/57b64f0035ba45e3bd4a0d0c6e575490.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221122/77c7367e246e44d2a2919a9194801740.png