[分享]css元素高度感觉上下有间隔

CSS 元素高度感觉上下有间隔在 CSS 中，元素高度的设定和调整是一个非常重要的事情。有时候我们会发现，即使一个元素的高度被设定为某个具体数值，但是在实际页面上看起来却有一定的上下间隔，这时候我们需...

CSS 元素高度感觉上下有间隔
在 CSS 中，元素高度的设定和调整是一个非常重要的事情。有时候我们会发现，即使一个元素的高度被设定为某个具体数值，但是在实际页面上看起来却有一定的上下间隔，这时候我们需要知道一些关于元素高度的知识和技巧。
1. 行高对元素高度的影响
行高（line-height）是一个影响元素高度的因素。如果你设定了一个元素的高度为 50px，但是行高为 1.5，实际上这个元素的高度就变成了 75px。因为行高会将元素的上下留白也占据一定空间。
例如：

<br>
p {<br>
  height: 50px;<br>
  line-height: 1.5;<br>
}<br> 

实际上这个段落的高度是 75px，如果不希望上下留白，可以将行高设定为 1。
2. 元素默认行高对高度的影响
CSS 中，p 标签是一个典型的块级元素，但是它有默认的上下留白和行高，这些会对元素高度产生影响。如果你想让一个 p 元素的高度和内容高度一致，需要将其内部元素的行高设定为 0。
例如：

<br>
p {<br>
  height: 50px;<br>
}<br>
p span {<br>
  line-height: 0;<br>
}<br> 

这样就可以确保这个段落的高度为 50px，不会因为行高和默认留白而增加高度。
3. 元素边框和 padding 对高度的影响
元素的边框和 padding 也会对元素高度产生影响。例如一个元素的高度设定为 50px，但是同时有 10px 的 padding-top 和 2px 的边框，实际上这个元素的可视高度只有 38px，因为 padding 和边框都占据了一定空间。
例如：

<br>
p {<br>
  height: 50px;<br>
  padding-top: 10px;<br>
  border-top: 2px solid black;<br>
}<br> 

这个段落的可视高度只有 38px。
通过这些知识和技巧，我们可以更好地掌控元素的高度，避免出现上下留白或者节点高度变化的问题。