0

I'm having problems to remove the margin of child divs. I'd like to have the squares defined at #overview > div next to next.

#overview {
  display: inline-block;
  margin: 0em;
  padding: 0em;
  background: green;
}

#overview > div {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  margin: 0;
  border-bottom: 2px solid black;
}

div.type1 {
  background: #990099;
}

div.type2 {
  background: #000080;
}
div.type3 {
  background: #734d26;
}

div.type4 {
  background: #990000;
}
<div id="overview">
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type3"></div>
  <div class="type2"></div>
  <div class="type2"></div>
</div>

jsfiddle

I'd like to find a solution without floating the squares, and without setting negative margins!

Thanks for the help!

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
  • are you talking about the black border at the bottom of the divs? – midda25 Jun 19 '16 at 10:47
  • @midda25 no, I'm talking about the space between the squares, the border is okay. –  Jun 19 '16 at 10:48
  • Ah sorry...im sure this is a browser rendering issue and will be different/consistent between different browsers. What is wrong with floating the divs? – midda25 Jun 19 '16 at 10:49
  • @midda25 the problem is that I don't know the number of squares. If I float them the html below the `#overview` will come trough. Then I'll need to use javascript to fix the problem I guess. –  Jun 19 '16 at 10:51
  • For the space between elements, see [How to remove the space between inline-block elements?](http://stackoverflow.com/q/5078239/1529630). For the space below them, see [Image inside div has extra space below the image](http://stackoverflow.com/q/5804256/1529630) – Oriol Jun 19 '16 at 11:02

4 Answers4

1

I think you can use 

#overview {
  display: flex;
  margin: 0em;
  padding: 0em;
  background: green;
  flex-direction:row;
}

#overview > div {
  width: 1.5em;
  height: 1.5em;
  border-bottom: 2px solid black;
}

div.type1 {
  background: #990099;
}

div.type2 {
  background: #000080;
}
div.type3 {
  background: #734d26;
}

div.type4 {
  background: #990000;
}
<div id="overview">
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type3"></div>
  <div class="type2"></div>
  <div class="type2"></div>
</div>
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Hiral Suvagya
  • 591
  • 3
  • 8
0

That's because you didn't add float left in your #overview > div, as below. Now set your margin value as you want them to be.

#overview > div {
  float:left;
}
Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
frnt
  • 8,455
  • 2
  • 22
  • 25
  • `I'd like to find a solution without floating the squares` – Mosh Feu Jun 19 '16 at 12:29
  • @MoshFeu there are many method, but it's up-to your goal what you want to achieve, I preferred float left because it give me more option of aligning my div, you can even try by implementing negative value to your margin and setting your #overview height. #overview{height:26px;} #overview > div{margin:0px -2px} or as given in above solutions by elad.chen and wikiti :-) – frnt Jun 20 '16 at 03:33
  • I preferred floating too, or flexbox. I agree it's better but the fellow specifically ask not to use floating. I don't know why. Maybe he dons't know the `clearfix` trick or something. – Mosh Feu Jun 20 '16 at 04:36
  • Yes agree maybe he don't know.... – frnt Jun 20 '16 at 05:58
0

You need to add "vertical-align: middle;" to your child elements ( your divs )

#overview {
  display: inline-block;
  margin: 0em;
  padding: 0em;
  background: green;
}

#overview > div {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  border-bottom: 2px solid black;
}

div.type1 {
  background: #990099;
}

div.type2 {
  background: #000080;
}
div.type3 {
  background: #734d26;
}

div.type4 {
  background: #990000;
}
<div id="overview">
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type4"></div>
  <div class="type2"></div>
  <div class="type3"></div>
  <div class="type2"></div>
  <div class="type2"></div>
</div>
elad.chen
  • 2,375
  • 5
  • 25
  • 37
  • The `vertical-align: middle` fixed the vertical spacing, and setting the divs next to next like @Wikiti said fixed the right space. Thanks :) –  Jun 19 '16 at 11:03
0

The browser is interpreting your newlines as blanks, and that's why it's adding spacing. Try removing them (it will be unreadable, but it will fix it without changing any css). The html:

<div id="overview">
    <div class="type4"></div><div class="type2"></div><div class="type4"></div><div class="type2"></div><div class="type3"></div><div class="type2"></div><div class="type2"></div>
</div>

And your css:

#overview {
    display: inline-block;
    margin: 0em;
    padding: 0em;
    background: green;
}

#overview > div {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    margin: 0;
    border-bottom: 2px solid black;
}

div.type1 {
    background: #990099;
}

div.type2 {
    background: #000080;
}
div.type3 {
    background: #734d26;
}

div.type4 {
    background: #990000;
}

JSFiddle

Wikiti
  • 1,626
  • 13
  • 21