Javascript 为什么scrollWidth不包含子元素'；右边距是多少？

我正在尝试将

幻灯片打开到包含其内容所需的最小大小，而不会出现任何溢出

以下是到目前为止我得到的信息：

window.onload=function（）{
设置超时（（）=>{
var thing=document.getElementById（'thing'）；
thing.style.maxWidth=thing.scrollWidth+“px”；
thing.style.maxHeight=thing.scrollHeight+“px”；
}, 1000);
}

正文{
背景色：黑色；
}
p{
利润率：40像素；
填充：0；
颜色：黄色；
背景颜色：绿色；
字体系列：monospace；
}
分区扩展器{
保证金：0；
填充：0；
最大宽度：0；
最大高度：0；
溢出：隐藏；
过渡：
最大宽度1s，
最大高度1s；
边框：1px纯红；
}
人力资源{
保证金：0；
填充：0；
边框顶部：1px纯蓝色；
边界权：无；
边框底部：无；
左边界：无；
}

你好，世界


再见，世界

这不是全部情况，但在特定场景中，

右边距

（或

左边距

）会被忽略。这是CSS中的块功能。发件人：

“左边距”+“边框左宽度”+“填充左”+“宽度”+“填充右”+“边框右宽度”+“边框右”=包含块的宽度

如果上述所有值的计算值不是“自动”，则这些值被称为“过度约束”，并且其中一个使用值必须与其计算值不同。如果包含块的“方向”属性的值为“ltr”，则忽略指定的“边距权利”值，并计算该值以使相等为真。如果“direction”的值为“rtl”，则发生在“marginleft”上

在我看来，这不是非常直观的行为，我更喜欢在可能的情况下避免块布局的边距（原因不止于此）。因此，您可以在

标记周围添加一个包装器

，并使用

填充。这还允许您在项目之间使用边框，而不是将
添加到内容中。我认为这两种方法都可以，这取决于你对它的实际使用情况。要引用MDN文档，请执行以下操作：

HTML
元素表示段落级元素之间的主题中断：例如，故事中场景的变化，或章节中主题的转移

从历史上看，这是一条水平线。虽然它在视觉浏览器中仍可能显示为水平规则，但该元素现在是用语义术语而不是表示术语定义的，因此如果您希望绘制水平线，则应使用适当的CSS

但是，虽然这解决了一些问题，但并不能解决所有问题。
元素的计算宽度仍然小于
min content
。因此，我们可以使用
min-width:min-content强制执行此操作
，或使用不同的
显示
值（可能在
扩展器上
）。这改变了用于计算引擎盖下宽度的算法

完整示例代码之前的最后一个注意事项：
max-width
和
max-height
是一个很好的例子，但只有当您试图避免修改JS中的样式时，它们才真正有用（想想
：悬停
或添加和删除
。从JS中打开
类，而不是直接设置宽度和高度）


setTimeout（（）=>{
const expander=document.querySelector（'.js expander'）；
expander.style.width=expander.scrollWidth+“px”；
expander.style.height=expander.scrollHeight+“px”；
}, 1000);
正文{
背景色：黑色；
}
.扩展器{
显示：网格；
宽度：0px；
高度：0px；
溢出：隐藏；
边框：1px纯红；
过渡：
宽度1s，
高度1s；
}
.扩展项{
填充：40px；
字体系列：monospace；
边框底部：1px纯蓝色；
}
.expander项：最后一个子项{边框底部：0px；}
.扩展项>*{
颜色：黄色；
背景颜色：绿色；
}
.expander项>：第一个子项{页边距顶端：0；}
.expander项>：最后一个子项{margin bottom:0；}

你好，世界

再见，世界

Make
p{display:inline block；}
。我不知道为什么会这样。你想把你的文本包装成两行吗？如果没有，则添加
空白：nowrap你的p风格。总的来说，我喜欢它-这是我最终追求的一个很好的起点，你让我很好地洞察了盒子模型内部的情况。。。但是通过删除
hr
并将边框附加到
.expander项
s，您已经改变了我的语义。蓝线不应该是它上面的
div
的属性-我后来想堆叠多个项目，但它们之间没有行，或者让我的
expander
使用
flex direction:row
，等等。这就是为什么我想要一个明确独立的元素——在我最初的问题中，我可能简化为一个有点太少的例子？很容易添加
标记，这就是为什么我提到它“可以走任何一条路”，但你刚才提到的对我来说都不像语义学。因此，我将澄清以防万一：如果这一点实际上是在段落之间包含一个主题分隔符，恰好显示为一条蓝线，我同意
标记可能属于两个项目之间。如果只是为了“包含一条蓝线”，这不属于HTML-您可以在每个
.expander项中包含多个
标记（也许“group”比“item”更好）还值得指出的是，这可能只是一个最低限度的例子，看起来可能是@ClaireNielsen更新了答案，包括如何添加