为什么H标签会溢出div背景？

为什么h标签溢出div背景？

在给div设置背景颜色后发现h标签溢出，很可能是由于h标签的上下margin外边距造成。

css中，margin不仅会影响元素本身的尺寸，也会影响其父元素的尺寸和布局。与margin-top类似，margin-bottom也会导致外边距塌陷。当两个相邻元素具有重叠的外边距时，它们的外边距可能会合并，从而导致实际外边距大于预期的值。这也被称为“外边距塌陷”。

在这个例子中，h标签的上下margin外边距与div的padding-top和padding-bottom重叠，导致了外边距塌陷。这使得h标签的外边距超过了div的高度，导致溢出。

为了解决这个问题，可以给父元素（div）添加一个padding-bottom，这样就可以为h标签提供足够的空间，防止溢出。

修改后的代码如下：

<div style="background-image: linear-gradient(to right, rgba(243,233,215,0), rgba(242,152,3,1));padding: 6px 8px 6px 30px;">
  <h2 style="font-family: HONORSansCN-Heavy;margin-top: 0;">GLOSTAR <span style="font-size: 0.8em;font-family: SourceHanSansCN-Bold;">员工心声</span></h2>
  <h2 style="font-family: HONORSansCN-Heavy">HEART VOICE</h2>
</div>

以上就是为什么H标签会溢出div背景？的详细内容，更多请关注其它相关文章！