In css how to joining two div classes without space?

Question

In my css I have the following:--

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;
  }

and my html is following;-

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

Now I am getting the page like

I want to remove this space.So,that two div class can join together. I have used margin-top:0px; but space is not removing..suggest me please.

`margin-top: negative value px;`? For example `margin-top: -5px;`. — Rvervuurt, Jul 22 '15 at 13:02
Check [THIS](https://jsfiddle.net/q2vcvjuc/2/) fiddle. I only changed the header1 image — Abhi, Jul 22 '15 at 13:06
Comment out the white spaces between those two `div` like so: `
`. — D4V1D, Jul 22 '15 at 13:07
possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Patsy Issa, Jul 22 '15 at 13:20
Wow, really? It takes *all* of this code to reproduce the problem? — cimmanon, Jul 22 '15 at 13:27

score 2 · Accepted Answer · answered Jul 22 '15 at 13:23

2

The space between your two divs comes from the div that wraps around the back, it makes the div higher than it looks.

To move it up, use a negative value for the margin-top.

For example

.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
}

answered Jul 22 '15 at 13:23

Rvervuurt

8,589
8
39
62

Use of negative margin is discouraged if there are other optimal solutions because it perform differently in different browsers. – Enigma Jul 22 '15 at 13:31
2

@Enigma Says who? I've never heard that before. – Rvervuurt Jul 22 '15 at 13:44
It is ok to have negative margins to achieve certain visual effects, but having negative margin means there is something incorrectly styled in your layout. Google It you will find tons of reasons for it ;) – Enigma Jul 22 '15 at 13:50
Unless you come with a source, I don't believe it @Enigma. All sources I find say it's perfectly fine, highly compatible with old browsers, and are valid CSS according to W3C since CSS2. – Rvervuurt Jul 22 '15 at 13:58
I am not saying it is invalid :), I am just saying we should be cautious with them and if there are other solutions then we should go for it. [http://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements] – Enigma Jul 22 '15 at 14:09

In css how to joining two div classes without space?

1 Answers1