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

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《为什么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="max-width:100%">
  <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背景？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！