根据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>