我想僅設定具有填充的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;
}
我發現原來的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知道答案……我真的很想知道.還請更正我的代碼片段中的錯誤(寬度：最大内容;等等).
謝謝！
(這篇文章包括對評論的一些調整)