inline, inline-block, block 区别 & 宽高设置 & 与margin、padding共用失效情况整理

最新推荐文章于 2022-01-06 16:33:36 发布

橙橙鲁

最新推荐文章于 2022-01-06 16:33:36 发布

阅读量1.6k

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/Dorothy1224/article/details/84647387

版权

Css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

根据demo测试后的总结如下：

display:inline;

并列显示在同一行
宽高不可设置；
宽高就是它包含的文字或图片的宽高。
margin：只有左右，上下失效
padding：padding-top会超出父级

display:inline-block;

并列显示在同一行
宽高可设置；
元素宽度在不设置的情况下，和内容的宽度一致
高度在不设置情况下，和内容高度一致（而对于文字，具体高度并非font-size的大小，每个浏览器设置会有区别）
margin：都有，但margin-top会超出父级
padding：正常

display:block;

并列显示两行
宽高可设置；
元素宽度在不设置的情况下，和父元素的宽度一致
高度在不设置情况下，和内容高度一致（而对于文字，具体高度并非font-size的大小，每个浏览器设置会有区别）
margin：正常
padding：正常

相关测试情况如下：

以下均是Chrome测试情况：

display:inline;

如下是宽高情况：font-size是14px，但标签高度时21.2px，这个是浏览器自动设置的，firefox和Chrome也不同。（下同）

display:inline-block;

inline-block 的宽高是跟着内容的，和inline相同；但又可以设置宽高，和block相同。

display:block;

引申：

看完上面的例子，很奇怪的是关于inline和block情况的margin和padding的top值，都超出了父元素。

查了些资料，可能的原因如下：

（如有更官方的资料，求大神们分享~）

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己的父元素，祖先元素。

以上资料是摘自：https://blog.csdn.net/hahhahahaa/article/details/80676873

在demo上测试后，解决子元素的margin-top超出父元素（让父元素能够包裹被超出的margin-top）的方法：

父元素设置overflow: hidden;
父元素设置display:inline-block;
父元素设置float或absolute（或fixed）
父元素设置padding-top（1px都可以）
父元素设置透明border（border: 1px solid transparent;）

【以上方法仅限于子元素是display:block;，对于display:inline;无效。】

引申：

将子元素内容文字换为图片，

在div内写img出现留白问题：

解决方法：

img加display: block;，父级的高度会变小刚好没有空白部分；
img加vertical-align: top/bottom/middle/text-top/text-bottom/sub
img父级加font-size: 0;
img父级加line-height: 0;

引申：

有些行内元素可以设置宽高现象

这类元素在现象上和类似于display:inline-block;

但在浏览器审查元素显示仍是display:inline; 而且是灰色的，说明是默认的。

这类元素被称为可置换元素，常见的如 img、input、select、textarea、button等。

附：原始测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 30px;
        }
        .parent{
            width:300px;
            height: 150px;
            background: yellow;
        }
        .a{
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="a">abc</div>
    </div>
</body>
</html>

橙橙鲁

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
inline, inline-block, block 区别 & 宽高设置 & 与margin、padding共用失效情况整理

根据demo测试后的总结如下：display:inline;并列显示在同一行宽高不可设置；宽高就是它包含的文字或图片的宽高。 margin：只有左右，上下失效 padding：padding-top会超出父级display:inline-block;并列显示在同一行宽高可设置；元素宽度在不设置的情况下，和内容的宽度一致高度在不设置情况下，和内容高度一致（而对于...
复制链接

扫一扫