当在带有滚动条的块元素中时，如何正确设置块元素的边距？答案

【问题标题】：How do you properly set the margin of a block-element, when within a block-element with scrollbars?当在带有滚动条的块元素中时，如何正确设置块元素的边距？
【发布时间】：2015-10-20 03:41:46
【问题描述】：

我有用于显示内容的<div> 块。我已经设置了 div，如果内容太大，应该会出现一个垂直滚动条。

现在，我需要将表格放在这个容器 div 中，并且我需要它与父级一样宽，每边有几个像素的边距。但是，当我对内表应用边距时，右侧的大小超出了父 div 的边缘，并带有滚动条。

<div  style="overflow: scroll; overflow-x:hidden; position:relative; width: 100%; height:100%; background: magenta">
<table class="data_container"  style="width:100%;">
    <tr>
        <td style="height:400px">How can I fix my margins?</td>
    </tr>
</table>

.data_container {
    border-color: black;
    border-style: solid;
    border-width: 2px;
    background-color: white;
    margin: 50px !important;
    font-size: smaller;
}

另外，这是我在JSFiddle 中看到的示例。这是一个演示问题的准系统示例。

【问题讨论】：

那么，你的问题到底是什么？
@j08691 它现在已经更新了，不过我仍然建议在 JSFiddle 中看到它的实际效果。
你在标题和介绍中所说的不正确，内框是而不是
，并且table不完全充当块级。

两者都可以。您应该始终在您的问题中发布您的代码，并可选择添加堆栈 sn-p 或第三方资源，如 jsFiddle。如果你只是把你的代码放在一个小提琴中，然后它们就消失了或被关闭了，那么你的问题对未来的访问者来说就失去了所有价值。

Div with margin-left and width:100% overflowing on the right side的可能重复

标签： html css

【解决方案1】：

一种选择是使用 CSS'calc():

.data_container {
  border-color: black;
  border-style: solid;
  border-width: 2px;
  background-color: white;
  margin: 50px !important;
  font-size: smaller;
  width: calc(100% - 100px);
}

<div style="overflow: scroll; overflow-x:hidden; position:relative; width: 100%; height:100%; background: magenta">
  <table class="data_container">
    <tr>
      <td style="height:400px">How can I fix my margins?</td>
    </tr>
  </table>
</div>

【讨论】：

这个！！！我不知道CSS中存在这样的功能。对不起我所有的愚蠢。我已经开发 Windows 应用程序 10 多年了，直到最近我才开始前端 Web 开发。这种类型的东西部分是为什么我花了这么长时间才从 Windows 转移到 Web 的原因。您刚刚解决了我向我展示“calc(...)”函数的许多烦恼。谢谢，谢谢！
calc() 的一个问题是 IE 没有最好的支持

【解决方案2】：

This 需要发生什么？我在这里所做的是将 50px 的 margin 替换为其父级的 50px 的 padding

【讨论】：

是的，也不是。我正在展示我需要的简单变化。如果它是父级中的唯一块，则填充将起作用。事实并非如此，并且填充无法提供所需的结果。

【解决方案3】：

您不应该将表格用于此类事情。

HTML

<div id="container">
    <div id="inside">
        Fixed your problem.
    </div>
</div>

CSS

#container {
    width:90%;
    height:400px;
    overflow:scroll;
    border:1px solid blue;

}

#inside {
    width:90%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    border:1px solid red;
}

我想这就是你想要的，如果不是告诉我，希望这会有所帮助。 Here 是小提琴

【讨论】：

您认为他为什么要尝试使用表格进行布局？该表有一个名为data-container 的类，这也可能意味着里面会有数据，哪些表非常适合;)
我没有想到这一点，希望这会对那里的人有所帮助：P 谢谢你指出这一点！ :)

【解决方案4】：

人们都试图在没有正确解释问题的情况下给出解决方案。

width 属性给出了元素内部的宽度，不包括任何内边距、边框或边距。当您给它一个百分比值时，它会将父级的width 属性乘以该百分比并将其应用于子级而不考虑任何元素的填充、边距甚至边框。它的真正意思是“取父母宽度的 n% 并将孩子的宽度设置为那个”，其中 width 只是内部宽度。

幸运的是，现代 CSS 允许您编写类似 calc(100% - 20px) 的内容来将内部元素的大小设置为相对于其父元素的特定大小。您必须自己手动从这个孩子的宽度中减去任何边框、填充或边距。

【讨论】：