为何div内嵌套p标签会产生默认内边距？如何消除该内边距？

原因 #

浏览器自带的默认样式表会给<p>这类常用标签预设样式，其中<p>默认带有margin-top和margin-bottom（多数浏览器默认值为1em）。当你把<p>放进<div>时，这个默认外边距会和<div>的内容边缘产生距离，视觉上像是<div>有了内边距，但本质是<p>的外边距导致的。而直接在<div>里放文本时，文本本身没有默认外边距，所以<div>不会出现额外间距。

去除额外间距的方法 #

• 重置<p>的默认外边距：直接给<p>设置margin: 0;，彻底消除它的默认间距，是最直接的解决方式。
• 给<div>添加内边距：如果希望<div>本身保留内边距效果，可以给<div>设置padding属性（比如padding: 10px;），同时可根据需求保留或调整<p>的样式。
• 触发块级格式化上下文（BFC）：给<div>添加overflow: hidden;或display: flow-root;，让<p>的外边距被包含在<div>内部，避免margin折叠（适合需要保留<p>外边距但不想溢出<div>的场景）。

示例代码（重置p的默认外边距） #

<!DOCTYPE html>
<head>
<style>
div{border: 5px solid darkblue;}
p {margin: 0;} /* 消除p的默认外边距 */
</style>
</head>
<body>
<div>This box has no padding</div>
<div>
<p>This other box contains a paragraph and has no extra spacing</p>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者ikenga