Html 填充物来自何处，为什么弹性盒重叠？_Html_Css_Flexbox

Html 填充物来自何处，为什么弹性盒重叠？

html css

Html 填充物来自何处，为什么弹性盒重叠？,html,css,flexbox,Html,Css,Flexbox,所以我在自下而上自学HTML和CSS。我只是想自学CSS Flexbox 我想先做两个简单的专栏，但由于某种原因，它们是重叠的，我不知道为什么正如你所看到的，我在几乎所有的东西中都加入了padding:0和margin:0来尝试去除它，但我似乎无法修复它，所以这一定是我还没有学会的属性代码如下： html: 您使用引导，因此使用引导类来实现此flexbox： html，身体{ 身高：100%；填充：0px；宽度：100%； } 身体{ 保证金：0；填充：0px； } .包裹{ 边

所以我在自下而上自学HTML和CSS。我只是想自学CSS Flexbox

我想先做两个简单的专栏，但由于某种原因，它们是重叠的，我不知道为什么

正如你所看到的，我在几乎所有的东西中都加入了padding:0和margin:0来尝试去除它，但我似乎无法修复它，所以这一定是我还没有学会的属性

代码如下：

html:

您使用引导，因此使用引导类来实现此

flexbox

：

html，
身体{
身高：100%；
填充：0px；
宽度：100%；
}
身体{
保证金：0；
填充：0px；
}
.包裹{
边框：1px纯蓝色；
}
.弹性项目{
背景色：番茄；
填充：0px；
宽度：20px；
高度：20px；
利润率：10px；
线高：20px；
颜色：白色；
字号：1em；
字体大小：粗体；
文本对齐：居中；
}


1.
2.
3.
4.
1.
2.
3.
4.

引导程序还有一个名为

行的类

，该类的样式将覆盖您的样式

因此，将div类从row重命名为row1以查看效果

同时更改css文件中的类名

<body>
    <div class="flex-container">
      <div class="row1">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>
      <div class="row2">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>
    </div>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </body>


1.
2.
3.
4.
1.
2.
3.
4.

删除

右边距：-15px和左边距：-15px来自.row（您使用引导，这就是原因）您正在页面上使用引导，并且它具有.row类的样式，该类将左边距和右边距添加为-15px。尝试使用其他类名。您可以将其重命名为第1行。看到更新的fiddle@NanditaSharma修复了它，非常感谢！
html,
body {
  height: 100%;
  padding: 0px;
  width: 100%;
}

body {
  margin: 0;
  padding: 0px;
}

.flex-container {
  height: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row {
  width: 50%;
  border: 1px solid blue;
  padding: 0px;
  height: 100%;
}

.row2 {
  width: 50%;
  border: 1px solid blue;
  padding: 0px;
  margin-right: 0px;
  height: 100%;
}

.flex-item {
  background-color: tomato;
  padding: 0px;
  width: 20px;
  height: 20px;
  margin: 10px;
  line-height: 20px;
  color: white;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}

<body>
    <div class="flex-container">
      <div class="row1">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>
      <div class="row2">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>
    </div>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </body>