-1

I have this weird space between my margins, even using margin and padding of 0 for all the elements. Could anyone help me to understand this behavior in Chrome?

Thank you!

https://jsfiddle.net/rzby6mj7/3/

HTML:

<div class="parent">
  <div class="child child-1">ONE</div>
  <div class="child child-2">TWO</div>
</div>

CSS:

*{
    margin: 0;
    padding: 0;
}

.parent{
  background-color: pink;
  height: 200px;
}

.child{
  font-size: 30px;
  width: 40%;
  display: inline-block;
}

.child-1{
  background-color: grey;
}

.child-2{
  background-color: yellow;
}
Jorge Monte
  • 33
  • 4

1 Answers1

-1

that is because of the newline between your two divs. This should do the job

<div class="child child-1">ONE</div><div class="child child-2">TWO</div>

or

<div class="child child-1">ONE</div
><div class="child child-2">TWO</div>
Neil
  • 390
  • 2
  • 14
  • sorry, it doesn't make sense at all – Jorge Monte Sep 16 '18 at 14:19
  • @JorgeMonte in fact it makes sense, as html treats ALL transparents spaces like tabs or \n as spaces and since there are 3 spaces between your divs in your code (one newline and two spaces or a tab), html write that space. Have you tried removing the newline ? – Neil Sep 16 '18 at 14:23
  • I didn't downvote, probably someone else did. But yes you helped, I didnt know this behavior of HTML since it doesnt considerate spaces between elements to display. Thank you! – Jorge Monte Sep 16 '18 at 14:27
  • @JorgeMonte sorry but this is the worst way to fix the issue ... check the duplicate to understand more and get better ways – Temani Afif Sep 16 '18 at 14:29
  • Thank you Temani – Jorge Monte Sep 17 '18 at 17:26