Question

我最近偶然发现this example使用宽度有限且高度等于或大于包含HTML页面的文本。在检查来源之前，这一切看起来都很好......

内容有两个包装器（！）。我意识到，如果我试图改变内包装的填充物，那么它们内部的<h1>突然挣脱并将它们向下推。

padding:0 makes a mess.

这个填充问题有没有更好的解决方法？没有填充，边距表现不可预测。我不知道要颠覆这个......即使overflow:auto也不会需要另一个包装器来保持页面的内容不会成为它自己的狭窄可滚动区域。

修改 Here is a fiddle ，提供几种可能的解决方案。

解决方案1：需要额外的包装器，而后者又需要额外的填充。（尝试在<body>中添加填充会导致一些混乱。）
解决方案2：需要枚举可能导致内容气球膨胀的所有可能元素：h1-h6，ul，ol等......

Answer 1

问题是h1有一些top-margin，它会折叠为.wrapper。

您可以避免在.wrapper的顶部和h1之间插入伪元素：

.wrapper:before{
    content: '';
    display: table;
}

或者，您也可以尝试display: inline-block（请注意，由于line-height可能会产生额外空间）或display: block; height: 1px。

＆＃13;

html,body {
  margin:0; padding:0; height:100% 
}

html {
  background-color: gray;
}

body {
  background-color: white;
  font-family: verdana, arial;
  max-width: 300px;
  height: 100%;
  margin:0 auto;
}
.wrapper:before{
    content: '';
    display: table;
}

＆＃13;

<div class="wrapper">
  <h1>README</h1>
  The top margin of the word README extends above the content of this text.
</div>

＆＃13;

是否可以在不使用填充的情况下保持边距不会从其父div（尤其是body）溢出？

1 个答案: