你注意过一些html标签，如<div>,<p>,<ul>占满整个宽度，每一个都是以新的一行开始；而其它标签，如<span>,<img>,或者<a>不需要新起一行，总是连在一起。
为什么会产生这种区别呢？
关键点在于它们的display的值为block或者inline。
HTML Block and Inline Elements
Block 标签
- 宽度默认100%
- 以新的一行开始
- 宽度和高度属性可以设置
Inline 标签
- 按内容来占据需要的空间
- 元素连接在一起展示
- 不能设置宽、高属性
- 只能设定左右margin、padding，上下margin，padding不起作用
在Block和Inline标签，display定义一个新的inline-block值。
Inline-Block
- 无换行
- 元素连接在一起展示
- 宽度和高度属性可以设置
- 上下左右都可以设定margin和padding
设置不同的display，及展示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
line-height: 1.5;
}
section {
padding: 1em;
}
header {
margin-bottom: 1em;
}
.block {
background: blanchedalmond;
}
.block div {
border: 1px dashed coral;
margin-bottom: 20px;
margin-right: 10px;
}
.inline-block {
background: mistyrose;
}
.inline-block div {
display: inline-block;
margin-bottom: 20px;
margin-right: 10px;
border: 1px dashed firebrick;
}
.inline {
background: lemonchiffon;
}
.inline div {
display: inline;
margin-bottom: 20px;
margin-right: 10px;
border: 1px dashed darkgreen;
}
</style>
</head>
<body>
<section class="block">
<header>Block</header>
<div>Understanding CSS Display: None, Block, Inline and Inline-Block</div>
<div>Understanding CSS Display: None, Block, Inline and Inline-Block</div>
<div>Understanding CSS Display: None, Block, Inline and Inline-Block</div>
</section>
<section class="inline-block">
<header>Inline-block</header>
<div>Understanding CSS Display: None, Block, Inline and Inline-Block</div>
<div>Understanding CSS Display: None, Block, Inline and Inline-Block</div>
<div>Understanding CSS Display: None, Block, Inline and Inline-Block</div>
</section>
<section class="inline">
<header>Inline</header>
<div>Understanding CSS Display: None, Block, Inline and Inline-Block</div>
<div>Understanding CSS Display: None, Block, Inline and Inline-Block</div>
<div>Understanding CSS Display: None, Block, Inline and Inline-Block</div>
</section>
</body>
</html>
效果图
image
参考
Understanding CSS Display: None, Block, Inline and Inline-Block
网友评论