在 css 中如何在没有空格的情况下加入两个 div 类？ [关闭]答案

【问题标题】：In css how to joining two div classes without space? [closed]在 css 中如何在没有空格的情况下加入两个 div 类？ [关闭]
【发布时间】：2015-07-22 13:01:17
【问题描述】：

在我的 css 中，我有以下内容：--

body {
  background-color: #ffffff;
  font-family: arial, georgia, sans-serif;
  font-size: 16px;
}


.wrapper {
  width: 100%;
  position: relative;
  min-height: 1300px;
  background-color: yellow;
  -webkit-box-shadow: -10px 0 15px #000;
  -moz-box-shadow: -10px 0 15px #000;
  box-shadow: -10px 0 15px #000;
  -webkit-transition: -webkit-transform 0.2s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -ms-transition: -ms-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  transition: transform 0.4s ease;
}


.header1 {
  width: 100%;
  position: relative;
  min-height: 90px;
  clear:both;
  background: url(../images/tooplate_footer1.png) no-repeat; 
   -webkit-transition: -webkit-transform 0.2s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -ms-transition: -ms-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  transition: transform 0.4s ease;
}

input[type="checkbox"]:checked ~ .wrapper {
  -webkit-transform: translateX(250px);
  -moz-transform: translateX(250px);
  -ms-transform: translateX(250px);
  -o-transform: translateX(250px);
  transform: translateX(250px);
}

input[type="checkbox"]:not(:checked) ~ .wrapper {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}






input[type="checkbox"]:checked ~ .header1 {
  -webkit-transform: translateX(250px);
  -moz-transform: translateX(250px);
  -ms-transform: translateX(250px);
  -o-transform: translateX(250px);
  transform: translateX(250px);
}

input[type="checkbox"]:not(:checked) ~ .header1 {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}






@media only screen and (min-width: 35em) {
  .wrapper {
    max-width: 1000px;
    margin: 0 auto;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }


  .header1 {
    max-width: 1020px;
    margin: 0 auto;
   clear:both;
  }

我的 html 正在关注；-

 <body>
    <div class="wrapper">
    </div>
    <div class="header1"></div> 
   </body>

现在我得到这样的页面

我想删除这个空间。所以，两个 div 类可以连接在一起。我使用了 margin-top:0px;但空间没有被删除..请给我建议。

【问题讨论】：

margin-top: negative value px;?例如margin-top: -5px;。
检查THIS小提琴。我只更改了 header1 图像
而jquery标签的目的是什么？？？
How to remove the space between inline-block elements?的可能重复
哇，真的吗？重现问题需要所有代码吗？

标签： jquery html css

【解决方案1】：

你的两个 div 之间的空间来自于环绕在后面的 div，它使 div 比看起来更高。

要将其向上移动，请为上边距使用负值。

例如

.header1 {
  width: 100%;
  position: relative;
  min-height: 90px;
  clear:both;
  background: url(../images/tooplate_footer1.png) no-repeat; 
   -webkit-transition: -webkit-transform 0.2s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -ms-transition: -ms-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  transition: transform 0.4s ease;
  margin-top: -4px; //HERE
}

【讨论】：

如果有其他最佳解决方案，不鼓励使用负边距，因为它在不同浏览器中的表现不同。
@Enigma 说谁？我以前从未听说过。
可以使用负边距来实现某些视觉效果，但是负边距意味着您的布局中有一些不正确的样式。谷歌它你会发现很多原因;）
除非你有来源，否则我不相信@Enigma。我发现的所有来源都说它非常好，与旧浏览器高度兼容，并且是自 CSS2 以来根据 W3C 的有效 CSS。
我并不是说它是无效的 :)，我只是说我们应该谨慎对待它们，如果有其他解决方案，那么我们应该去做。 [stackoverflow.com/questions/19038799/…