This question already has answers here:
How do I remove the space between inline-block elements?
                                
                                    (39个答案)
                                
                        
                                4年前关闭。
            
                    
我想将页面分为三个块,每个块必须保持宽高比(16:9),其中两个必须并排,第三个应该在它们下面。我实现了它,但是两个开头的块之间有空白。我该如何删除?

https://jsfiddle.net/q3zutvgv/

HTML和CSS:



html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
        width: 100%;
        min-width: 100%;
      }
.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;

}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.wrapper2 {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper2:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}
.main2 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: green;
  /* let's see it! */
  color: white;
}
.main3 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: orange;
  /* let's see it! */
  color: white;
}

<body>

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>
<div class="wrapper">
  <div class="main2">
    div2.
  </div>
</div>
<div class="wrapper2">
  <div class="main3">
    This is your div with the specified aspect ratio.
  </div>
</div>

最佳答案

要删除inline-block元素之间的空格,请使用the most effective and cross-browser solution is to remove the newline between the tags。如果您不想让div标签触碰到,那么完成此操作的一种方法是添加一个HTML注释来填充换行符。

现场示例:



html,body {
        padding:0;
        margin:0;
        height:100%;
        min-height:100%;
        width: 100%;
        min-width: 100%;
      }
.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;

}
.wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.wrapper2 {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper2:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: inline-block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: deepskyblue;
  /* let's see it! */
  color: white;
}
.main2 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: green;
  /* let's see it! */
  color: white;
}
.main3 {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: orange;
  /* let's see it! */
  color: white;
}

<body>

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div><!--
--><div class="wrapper">
  <div class="main2">
    div2.
  </div>
</div>
<div class="wrapper2">
  <div class="main3">
    This is your div with the specified aspect ratio.
  </div>
</div>

10-05 20:58
查看更多