在使用 % 值定义时努力理解 css 中的填充 [重复]答案

【问题标题】：Struggling to understand padding in css when defining using % values [duplicate]在使用 % 值定义时努力理解 css 中的填充 [重复]
【发布时间】：2019-10-22 06:48:53
【问题描述】：

我想知道这样问是不是很愚蠢，但我还是问了，因为我还没有找到令我满意的答案。

我正在尝试制作一个响应式页面，我想在其中定义一个名为 content 的 div 的填充，其中包含另一个 div 作为“文本”，并且位于另一个名为 container 的 div 元素内，该容器已预定义 height 和 width 和position: relative。现在的问题是我定义了padding: 45% 45%；通过采用父容器的根值，它在width 上运行良好，但在涉及height 时它会刷新到父容器之外

.container
{
	box-sizing: border-box;
  position: relative;
  border: 1px;
	height: 100px;
	width: 600px;
  margin:0 auto;
}

.content{
    background-color: skyblue;
    padding: 43% 43%;

}
#textlogo {
	font-size: 4em;
}

<div class="container">
  <div class="content">
  <div id="textlogo">Text</div> 
</div> </div>

【问题讨论】：

你不想让它滚动？
如果您不想在垂直方向上进行填充，只需使用“填充：0 45%;”或填充左：45％； padding-right: 45%;
是的，我想如果我理解正确的话。但是，我不希望容器 div 超出 300px
不，实际上我希望所有边上的内边距都可以自动挤压到中心。
哦，我明白了...然后将 box-sizing 设置为 padding-box;

标签： html css

【解决方案1】：

您的问题似乎与box-sizing有关，

设置box-sizing: padding-box，这样浏览器会计算元素的总width和padding，并清除所有覆盖。您的填充也有点高，这是导致问题的原因。

您必须注意，刷新可能是由您的font-size: 4em 引起的。这是一个很大的font，它将强制content div 扩展以容纳它#textlogo 内容..

【讨论】：

感谢您的回复，对不起，我忘了提到我正在使用 box-sizing:border-box ，但它仍然无法正常工作。此外，使用“px”定义填充值绝对没有问题，但我想使用 % 定义以将内容置于中心位置，但它根本无法垂直工作。
你能看看我分享的代码吗？
这里的代码，你可以看到问题，虽然容器div的高度设置为100px，但是在浏览器上打开时，它基本上扩展为“Npx”大小。但是对于宽度，它可以完美地工作，没有任何我不明白为什么的问题？
问题是因为你设置了一个非常大的填充。该填充扩展了内容的宽度，因为#textlogo 也在起作用。尝试减少填充，但无论哪种方式，box-sizing 都是您的解决方案。除非您想通过使用 overflow: hidden or auto 来隐藏刷新

【解决方案2】：

您应该很少在 CSS 中使用 padding 属性。一直回到 Internet Explorer 4 margin 工作正常。

在子元素上使用margin，而不是在父元素上使用padding。如果您在父元素上使用填充，它会自动影响 all 子元素。您可以通过在示例中使用#parent > div 选择器将margin“覆盖”应用到所有子元素，然后为需要调整的各个元素级联辅助margin。

如果没有子元素，您应该使用padding或您正在处理渲染引擎或标准本身中的错误（例如，当使用隐含的“逻辑”而不是直接使用时（实际) 逻辑)。

正如 Mosia 提到的那样，有 box-sizing 属性，如果您想按照最初的预期方式学习 CSS，那么此时的支持非常普遍，但我不推荐使用该快捷方式，因为它会剥夺您真正的对代码的理解。

【讨论】：

感谢您的回答，最初我在子元素上使用了诸如边距之类的东西，但后来发现子元素正在使用正文的边距，因此它也移动了整个父 div 和前天我才发现定义一些边框或填充如何有助于解决该问题的解决方案。谈到填充的使用，这只是为了学习。但是，我要感谢大家提供的所有信息，这些信息让我相信我不会陷入学习 Web 开发的旅程中。 :)