有一些类似的问题在溢出和填充方面存在其他问题（关于隐藏属性，这里有一些具有绝对定位和溢出自动的特定问题 - 只是为了弄清楚这不是同一个问题已经在SO），但我没有在那里找到解决问题的方法，所以我们在这里......
我的身体有一个灰色的边框。里面是我的主要部分，内容在内容不适合时应该有滚动条（所以overflow:auto）。我在这里省略了固定的菜单栏（这就是那个灰色边框的原因）。当内容没有溢出时，外翻也很好 - 即使它溢出，段落中的文字也会考虑填充，但是直到溢出，没有填充，内容会转到右边框和下边框
我的CSS看起来像这样
body { background-color: lightgray; color: black; }
#main { padding: 20px;
background-color: white;
overflow: auto;
position: absolute;
top: 12px; left: 12px; right: 12px; bottom: 12px;
}
table { border-collapse: collapse; border-style: hidden; }
td { border: 1px solid black; padding: 4px; }
和html就是这样的
<section id="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
a narrow table
</p>
<table>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
</table>
<p>
a wide table
</p>
<table>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
</table>
</section>
这里是jsFiddle
我有什么要添加到CSS中，我的填充在大表的右边和底部（即当内容溢出时）？
感谢。
答案 0 :(得分：4)
问题是边距是用于将元素移动到其容器内，而不是用于扩展它。
您可以避免这种情况添加内容wrapper并将其display设置为inline-block。
body {
background-color: lightgray;
color: black;
}
#main {
padding: 20px;
background-color: white;
overflow: auto;
position: absolute;
top: 12px;
left: 12px;
right: 12px;
bottom: 12px;
}
.wrapper{
display: inline-block;
}
table {
border-collapse: collapse;
border-style: hidden;
}
td {
border: 1px solid black;
padding: 4px;
}
<section id="main">
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
a narrow table
</p>
<table>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
</table>
<p>
a wide table
</p>
<table>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
<tr>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
<td>
Lorem
</td>
<td>
ipsum
</td>
<td>
dolor
</td>
<td>
sit
</td>
<td>
amet,
</td>
<td>
...
</td>
</tr>
</table>
</div>
</section>
其他信息：如果要在溢出内容和滚动条之间填充，则必须将填充线从#main移动到.wrapper - 这是问题的初衷。