CSS 日常练习----inline元素边框问题

记录日常 CSS 练习的小知识点 —— inline元素边框问题

inline元素边框问题

点击预览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test{
background: red;
}
.t1{
border: 10px solid black;
}
.t2{
border: 20px solid black;
}
.t3{
border: 30px solid black;
}
</style>
<body>
<p>行内元素(行内块)的边框并不会影响整行的基线对齐,可理解为边框只显示不占位</p>
<p>绝对行内元素占位的字体大小</p>
<p>inline元素的层级要高于普通元素</p>
<div class="test">
<span class="t1">我有1px边框</span><span class="t2">我有2px边框</span><span class="t3">我有3px边框</span>
</div>
</body>
</html>
0%