简述
在css中,行内元素的特点是:
- 会和相邻的行内元素排成一行
- 设置宽、高无效;默认宽高是自身内容的宽高
- 只能设置水平方向的内外边距;
- 只能容纳其他行内元素和文本;
在做测试的时候发现,行内元素的下外边距是可以设置的,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内元素</title>
<style>
span {
background-color: #bfa;
padding: 50px;
margin: 50px;
}
p {
background-color: red;
padding: 50px;
}
</style>
</head>
<body>
<span>hello world!!!</span>
<span>hello world!!!</span>
<p>hello world!!!</p>
</body>
</html>
我们会发现,span的下内边距是可以设置的,但是不会影响页面布局。
总结
所以,行内元素内边距左右有效,上下无效;但是要说明的一点是:下方内边距是可以显示的,但是不会影响整体的页面布局。