CSS：为什么右边距大于左边距（单位相同）？答案

【问题标题】：CSS: Why the right margin is larger than the left one (with the same unit)?CSS：为什么右边距大于左边距（单位相同）？
【发布时间】：2021-12-23 15:17:31
【问题描述】：

我有（这里只是与定位相关的参数）：

   .container{
        width: 100%;
        margin: 1rem;
        border: 1px solid black;
    }

    .inner-container{
        margin: 1rem;
        border: 1px solid gray;
    }

<div class="container">
       <div class="inner-container">
           Hello World!
       </div>
    </div>

我原以为左侧和右侧的空格在“inner-container”和“container”之间" 是相等的，但不是：右边的空间是左边的两倍大。

为什么？我想在“inner-container” >容器”。

我试过了

body{ margin: 0px } // proposed by @Uttam

或（由删除他/她评论的人）

*{
    margin: 0;
    padding:0;
}

但这两种解决方案都不适合我！我也尝试过 "reset CSS" 或将 "position: relative" 添加到 "container" 和 "position: absolute " 到 "inner-container"，但我还是有同样的问题！

注意：非常感谢您的帮助（@Uttam 和@Temani Afif）。您的解决方案应该有效，但它不适合我。这是我的全部代码：

* {
  margin: 0;
  padding: 0; }

html {
  font-size: 62.5%; }

body {
  font-family: "Times New Roman", Times, serif; 
}

.container {
  width: 98%;
  margin: .5rem;
  border: 1px solid #000;
  border-radius: 7px;
  text-align: justify; 
}

.inner-container {
  max-width: 100%;
  background-color: #eee;
  text-align: justify;
  border: 1px solid #337ab7;
  border-radius: 1rem;
  padding: 0.5rem 0.5rem;
  margin: 0.5rem 0 0.2rem 0.1rem; // trying to correct the problem
  box-shadow: 1px 1px gray; 
}

【问题讨论】：

嘿@bern19 请尝试通过添加一些屏幕截图来详细说明您的问题。添加您正在努力解决的错误以及您想要实现的目标的屏幕截图
您想将文本居中对齐吗？我无法将您的屏幕截图与代码中的任何错误联系起来
查看当前情况的屏幕截图会非常有帮助，因此我们可以获得更多线索。
@Mordred 我放了一张截图，但图片没有显示出来。似乎我不允许对某人进行图片或投票（没有足够的声誉或其他东西）
@Uttam 我的文本居中对齐。我不想把我所有的 CSS 放在这里（大项目），就足以显示我的问题。谢谢你的建议！

标签： css margin

【解决方案1】：

container 和 inner-container 之间的边距相等，但如果您不删除正文的默认边距，那么您可能会遇到一些与 边距或填充有关的问题。

body{
margin:0px;
}
.container{
    width: 100%;
    border: 1px solid black;
}

.inner-container{
    margin: 1rem;
    border: 1px solid gray;
}

<div class="container">
   <div class="inner-container">
       Welcome World!
   </div>
</div>

【讨论】：