使边距相同

Question

我already posted关于这个善良问题的问题，但我在任务中还不清楚，所以所有的答案（很多的答案）是关于另一个问题。

由于答案很多，我决定提出另一个问题，而不是编辑前一个问题。因为普通问题对某人也很有用。

这是图片：

这是代码。可能有人可以帮助我吗？

<h1>OK</h1>
<div style="background: rgb(255,205,205); padding-left: 10%;">Padding 10%</div>
<div style="background: rgb(205,255,205); margin-left: 10%;">Margin 10%</div>

<h1>OK</h1>
<div class="class-wrapper">
<div style="background: rgb(255,205,205); padding-left: 10%;">Padding 10%</div>
<div style="background: rgb(205,255,205); margin-left: 10%;">Margin 10%</div>
</div>

<h1>Why?? And how to avoid?</h1>
<p>For some reason I need to use the both wrappers.
What is the way to fix the left alignment?</p>

<div class="class-wrapper1">
<div class="class-wrapper2">
<div style="background: rgb(255,205,205); padding-left: 10%;">Padding 10%</div>
<div style="background: rgb(205,255,205); margin-left: 10%;">Margin 10%</div>
</div>
</div>

<style>
.class-wrapper  {padding-left: 10%; margin-left: -10%; margin-top: 1em; }
.class-wrapper1 {padding-left: 10%; margin-top: 1em; }
.class-wrapper2 {margin-left: -10%; margin-top: 1em; }
</style>

Answer 1

此代码将解决问题

.class-wrapper1{

}

.class-wrapper2 {
 margin-left: -10%;
 margin-top: 1em;
 padding-left: 10%;
}

结果：jsfiddle

Answer 2

这些规则集对我来说总是很好用，它们将所有长度（即边距，填充，边框等）设置为0，并定义每个元素的测量方式（ box-sizing: border-box ）。还有一些来自reset.css的其他属性，如果有需要则很小但很好。

将这些规则放在CSS的顶部。由于它是重置，你可能需要稍微重做你的布局，但现在你将调整为获得10px的余量，而不是18px，你也会得到相同的结果，同样的元素也是如此。你不是之前的原因是因为每个浏览器都有不同的默认值，所以将所有内容降低到0可能会有所帮助，除非你在像Word-Press这样的千篇一律的主机上运行你的网站。

html {
  box-sizing: border-box;
  font: 500 16px/1.428 'Arial';
  height: 100vh;
  width: 100vw;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  position: relative;
  font-size: 1rem;
  line-height: 1;
  height: 100%;
  width: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Answer 3

这种情况正在发生，因为您使用百分比作为边距和填充。 class-wrapper2的边距/填充基于其所包含的框class-wrapper1的较小尺寸。

因此你需要设置更大的负边距（11.1％）

＆＃13;

＆＃13;

<div style="position: absolute; left: 10.5%; outline: 1px solid red; height: 100%;width: 100%"> </div>
    <h1>OK</h1>
    <div style="background: rgb(255,205,205); padding-left: 10%;">Padding 10%</div>
    <div style="background: rgb(205,255,205); margin-left: 10%;">Margin 10%</div>

    <h1>OK</h1>
    <div class="class-wrapper">
    <div style="background: rgb(255,205,205); padding-left: 10%;">Padding 10%</div>
    <div style="background: rgb(205,255,205); margin-left: 10%;">Margin 10%</div>
    </div>

    <h1>Why?? And how to avoid?</h1>
    <p>For some reason I need to use the both wrappers.
    What is the way to fix the left alignment?</p>

    <div class="class-wrapper1">
    <div class="class-wrapper2">
    <div style="background: rgb(255,205,205); padding-left: 10%;">Padding 10%</div>
    <div style="background: rgb(205,255,205); margin-left: 10%;">Margin 10%</div>
    </div>
    </div>

    <style>
    div {box-sizing: border-box;}
    .class-wrapper  {padding-left: 10%; margin-left: -10%; margin-top: 1em; }
    .class-wrapper1 {padding-left: 10%; margin-top: 1em; }
    .class-wrapper2 {margin-left: -11.1%; margin-top: 1em; }
    </style>

＆＃13;

＆＃13;

＆＃13;