margin is set to zero but it still showing

Question

My html has 2 sections, margin is zero but it still showing

.box1 {
  width: 300px;
  height: 450px;
  background-color: green;
  border: 0px;
  display: inline-block;
  margin: 0;
  padding: 0px;
}

.box2 {
  width: 150px;
  height: 300px;
  background-color: purple;
  border: 0px;
  display: inline-block;
  margin: 0;
  padding: 0px;
}

<body>
  <div class="box2"></div>
  <div class="box1"></div>
</body>

this is result

Please refer this https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — Tushar, Jun 08 '17 at 10:48
This is relevant: [Fighting the Space Between Inline Block Elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) — AlexG, Jun 08 '17 at 10:50

XYZ · Answer 1 · 2017-06-08T11:11:38.020

3

It is not the margin. It is the new lines converted to "spaces" when displaying it.It is because of the display:inline-block of the div . You can either remove the space or remove that with comments  between the divs

.box1 { width: 300px;
height: 450px;
background-color: green;
border: 0px;
display: inline-block;
margin: 0;
padding: 0px; }

.box2 { width: 150px;
height: 300px;
background-color: purple;
border: 0px; 
display: inline-block;
margin: 0;
padding: 0px;}

<div class="box2"></div><!--

   --><div class="box1"></div>

edited Jun 08 '17 at 11:11

answered Jun 08 '17 at 10:47

XYZ

4,450
2
15
31

YES! Didnt know that, TNX. :)) – Mladen Milosavljevic Jun 08 '17 at 10:49
@MladenMilosavljevic You can read more about that here https://css-tricks.com/fighting-the-space-between-inline-block-elements/ – XYZ Jun 08 '17 at 10:50

margin is set to zero but it still showing

1 Answers1