Question

完整的工作示例是here on CodePen.io。有四个div，名为.inner-cols 以下是应用于.inner-cols

的样式

.inner-cols{
  background-color:green;
  display:inline-block;
  width:200px;
  margin:0px;
  padding:0px;
}

由于4个div的边距和填充设置为0，为什么它们不相邻？谁能解释一下？在这里输入代码

＆＃13;

* {
  padding: 0px;
  margin: 0px;
}
#container {
  background-color: red;
  width: 80%;
  margin: auto;
}
.inner-cols {
  background-color: green;
  display: inline-block;
  width: 200px;
  margin-right: 0px;
  padding: 0px;
}
#one-more-container {
  margin: auto;
  width: 80%;
}

＆＃13;

<div id="container">
  <!--container-->
  <div id="one-more-container">
    <div class="inner-cols">col1</div>
    <div class="inner-cols">col2</div>
    <div class="inner-cols">col3</div>
    <div class="inner-cols">col4</div>
  </div>
</div>

＆＃13;

Answer 1

因为内联元素对空白区域敏感。一个简单的解决方法是简单地删除元素之间的空白区域。其他解决方案是浮动元素，或将父容器上的字体大小设置为零。

＆＃13;

* {
  padding: 0px;
  margin: 0px;
}
#container {
  background-color: red;
  width: 80%;
  margin: auto;
}
.inner-cols {
  background-color: green;
  display: inline-block;
  width: 200px;
  margin-right: 0px;
  padding: 0px;
}
#one-more-container {
  margin: auto;
  width: 80%;
}

＆＃13;

<div id="container">
  <!--container-->
  <div id="one-more-container">
    <div class="inner-cols">col1</div><div class="inner-cols">col2</div><div class="inner-cols">col3</div><div class="inner-cols">col4</div>
  </div>
</div>

＆＃13;

<强>浮动：

＆＃13;

* {
  padding: 0px;
  margin: 0px;
}
#container {
  background-color: red;
  width: 80%;
  margin: auto;
  overflow:auto;
}
.inner-cols {
  background-color: green;
  display: inline-block;
  width: 200px;
  margin-right: 0px;
  padding: 0px;
  float:left;
}
#one-more-container {
  margin: auto;
  width: 80%;
}

＆＃13;

<div id="container">
  <!--container-->
  <div id="one-more-container">
    <div class="inner-cols">col1</div>
    <div class="inner-cols">col2</div>
    <div class="inner-cols">col3</div>
    <div class="inner-cols">col4</div>
  </div>
</div>

＆＃13;

字体大小为零：

＆＃13;

* {
  padding: 0px;
  margin: 0px;
}
#container {
  background-color: red;
  width: 80%;
  margin: auto;
  font-size:0;
}
.inner-cols {
  background-color: green;
  display: inline-block;
  width: 200px;
  margin-right: 0px;
  padding: 0px;
  font-size:16px;
}
#one-more-container {
  margin: auto;
  width: 80%;
}

＆＃13;

<div id="container">
  <!--container-->
  <div id="one-more-container">
    <div class="inner-cols">col1</div>
    <div class="inner-cols">col2</div>
    <div class="inner-cols">col3</div>
    <div class="inner-cols">col4</div>
  </div>
</div>

＆＃13;

Answer 2

你在div之间得到空格，因为每个div都被赋予了内联块。请阅读以下链接，删除内联元素https://css-tricks.com/fighting-the-space-between-inline-block-elements/之间的空格。

虽然边距和填充为零，但为什么这些div不相邻？

2 个答案: