如何调整div边框尺寸使其适配内部h5、hr及2个p元素的内容

你遇到的问题核心有两个：

• 块级div默认宽度占满父级容器，不会自动收缩适配内容
• 内部h5、p元素加了450px的超大左外边距把内容右推，反而撑大了父div的占位尺寸

修复方法 #

你可以直接用width: fit-content属性实现div宽度自动收缩适配内部内容，同时把内部元素的外边距挪到父div的内边距上设置，避免内部margin撑大容器，修复后的代码如下：

<div style="border: black 0.5px solid; align-self: start; width: fit-content; padding: 200px 20px 20px 450px;">
  <h5 style="margin: 0;">xxxx</h5>
  <hr width="50px" style="margin: 10px 0 40px 0;" />
  <p style="margin: 0 0 10px 0;">xxxx</p>
  <p style="margin: 0;">xxxx</p>
</div>

如果需要兼容低版本浏览器，可以把div的display属性设置为inline-block，也能实现收缩包裹内容的效果，若需要div独占一行，在外层套一个普通块级容器即可。

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