0

I have a html and css code that make a weird spacing happen between 2 divs and between other divs there is no spacing, for no obvious reason (at least to me) And because of that problem my first 2 divs can't fit in same row. And I have second code with simuilar code that doesn't have any spacings between divs, can anyone find a reason for this kind of thing to happen, what am I missing?

1st code:

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.col-4 {
  width: 33.333%;
}

.form-group {
  display: inline-block;
  padding: 8px;
  background: yellow;
  margin-top: 24px;
  vertical-align: top;
}
<body>
  <div class="form-group col-4">1</div>
  <div class="form-group col-4">2</div>
  <div class="form-group col-4">3</div>
  <div class="form-group col-4">4</div>
  <div class="form-group col-4">5</div>
</body>

picture from first code

2nd code:

div {
  width: 33.333%;
  height: 30px;
  vertical-align: top;
}

#div1 {
  background-color: red
}

#div2 {
  background-color: orange
}

#div3 {
  background-color: yellow
}

#div4 {
  background-color: green
}

#div5 {
  background-color: blue
}

#div2,
#div3,
#div4 {
  display: inline-block;
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>

picture from 2nd code

Cœur
  • 37,241
  • 25
  • 195
  • 267
Pronix
  • 3
  • 1

4 Answers4

1

try this

html,
body{
    margin: 0;
    padding: 0;
}

* {
   box-sizing: border-box;
}

.col-4 {
    width: 33.333%;
    float: left;
 }

 .form-group {
     display: inline-block;
     padding: 8px;
     background: yellow;
     margin-top: 24px;
     vertical-align: top;
  }
<div class="form-group col-4">1</div>
    <div class="form-group col-4">2</div><div class="form-group col-4">3</div><div class="form-group col-4">4</div>
    <div class="form-group col-4">5</div>
satyajit rout
  • 1,623
  • 10
  • 20
0

inline-block creates whitespace between elements. There are innumerable solutions to bypass this issue but one of the most simplistic is simply to change display: inline-block to float:left

Robert
  • 6,881
  • 1
  • 21
  • 26
0

You can add some comments to avoid spaces 

<div id="div1"></div><!--
--><div id="div2"></div>
Florian Lucas
  • 31
  • 5
0
/* -----use this-------- */






html,
body {
  margin: 0;
  padding: 0;
}

 

.col-4 {
  width: 33.333%;
}

.form-group {
 float:left;
   padding: 8px;
   box-sizing:border-box;
  background: yellow;
   vertical-align: top; }
 .clearfix{
  clear:both;}


 <div class="form-group col-4">1</div>
  <div class="form-group col-4">2</div>
  <div class="form-group col-4">3</div>
  <div class="form-group col-4">4</div>
  <div class="form-group col-4">5</div>
  <div class="form-group col-4">6</div>