html页面中div怎么划分区域,html – 样式只有带填充的div的内容区域

我想仅设置具有填充的div的内容区域以显示其内容边界,就像开发工具中的内部框由Web浏览器着色.我已经尝试了很多东西,但是css建议还没有实现,或者我可能以错误的方式使用它.

stuff ...

.around { margin: 50px auto; width: 400px; padding: 0px; }

.div-with-padding { min-height: 200px; padding: 15px; }

为了比较,我在div中添加了一个大纲.位置：相对下方是必需的,因为如果其子位置是相对的,其子项的最大高度/宽度仅适合匹配的div.

.outline-content {

outline: 1px solid red;

position: relative; /* in the original post I've used bootstrap instead */

}

我发现原来的div中没有​​办法做到这一点,所以我添加了一个伪元素.

第一次尝试：

.outline-content::before {

content: '';

position: absolute;

width: max-content; height: max-content;

outline: 1px dotted blue;

}

我真的不明白max-content的工作原理.我也尝试了其他mdn.也许它不起作用,因为我设置了位置：绝对;不要改变页面本身.

第二次尝试：

.outline-content::before {

content: '';

position: absolute;

width: calc(100% - 30px); height: calc(100% - 30px);

outline: 1px dotted blue;

}

问题是如果父级的填充= 30px并不总是相同的话.我尝试了很多但没有成功.

我知道使用jQuery这个问题变得容易了.如果有人只用css知道答案……我真的很想知道.还请更正我的代码片段中的错误(宽度：最大内容;等等).

谢谢！

(这篇文章包括对评论的一些调整)