CODEWITHSUNDEEP
htmlcss
Dalin Huang
Dalin Huang

Reputation: 11342

Why there are 2px space added between zero margin button?

I was tring the following, found two things:

  1. even I set margin to 0 for buttons, there are still a 2px space on left/right of the button, why (I have to use -2px to remove the space)?

  2. if I have 5 20% width button with border 2px, they will fit in one row, but using span and div with same border they will not fit in one row, I have to remove the border or set to 0px, seems like for button the border are included to the 20% width but for span and div the border are added to the 20%? Can anyone explain this?

Thanks in advance.

button {
   height: 25px;
   width: calc(100% / 5);
   margin: 0;
   padding: 0;
   background: white;
 }

.test,div,span {
  margin: 0 -2px;
}



div,span {
   height: 25px;
   width: calc(100% / 5);
   margin: 0 -2px;
   padding: 0;
   border: 2px solid black;
   background: lightblue;
   display: inline-block;
 }
 
 
 .noborder {
   height: 25px;
   width: calc(100% / 5);
   margin: 0 -2px;
   padding: 0;
   border: none;
   background: lightblue;
   display: inline-block;
 }
 
 .aqua{
  background: aqua;
 }
button (margin: 0px):
<br><br>

<button>Btn 1</button>
<button>Btn 2</button>
<button>Btn 3</button>
<button>Btn 4</button>
<button>Btn 5</button>

<hr>
button (margin: 0 -2px):
<br><br>

<button class="test">Btn x1</button>
<button class="test">Btn x2</button>
<button class="test">Btn x3</button>
<button class="test">Btn x4</button>
<button class="test">Btn x5</button>

<hr>
div:(margin: -2px)<br>
border: 2px solid black;
<br><br>

<div>Btn 1</div>
<div>Btn 2</div>
<div>Btn 3</div>
<div>Btn 4</div>
<div>Btn 5</div>


<hr>
span:(margin: -2px)<br>
border: 2px solid black;
<br><br>

<span>Btn 1</span>
<span>Btn 2</span>
<span>Btn 3</span>
<span>Btn 4</span>
<span>Btn 5</span>


<hr>
div:(margin: -2px)<br>
border: none;
<br><br>

<div class="noborder">Btn 1</div>
<div class="noborder aqua">Btn 2</div>
<div class="noborder">Btn 3</div>
<div class="noborder aqua">Btn 4</div>
<div class="noborder">Btn 5</div>


<hr>
span:(margin: -2px)<br>
border: none;
<br><br>

<span class="noborder">Btn 1</span>
<span class="noborder aqua">Btn 2</span>
<span class="noborder">Btn 3</span>
<span class="noborder aqua">Btn 4</span>
<span class="noborder">Btn 5</span>

Upvotes: 2

Views: 584

Answers (2)

Emonadeo
Emonadeo

Reputation: 504

That isn't actually a margin. It is in fact a space which got there from the html code. The break between </span> and <span> gets counted as space and thus gets displayed as a gap.

To fix this kind of bug there are multiple solutions. I won't list all of them but you can read this for reference. The way I solve the bug is to set the font-size of the container which holds inline-block-elements to 0 (and inside the inline-block-elements I set the size back to the default).

Upvotes: 1

hoangfin
hoangfin

Reputation: 721

Because is inline block and space between inline elements in html document is honoured. I have modified your button markup so I'll see no extra space between those buttons.

button {
   height: 25px;
   width: calc(100% / 5);
   margin: 0;
   padding: 0;
   border: 2px solid black;
   background: white;
 }

.test {
  margin: 0 -2px;
}



div,span {
   height: 25px;
   width: calc(100% / 5);
   margin: 0;
   padding: 0;
   border: 2px solid black;
   background: white;
   display: inline-block;
 }
button (margin: 0px):
<br><br>

<button>Btn 1</button><button>Btn 2</button><button>Btn 3</button><button>Btn 4</button><button>Btn 5</button>
<hr>
button (margin: 0 -2px):
<br><br>

<button class="test">Btn x1</button>
<button class="test">Btn x2</button>
<button class="test">Btn x3</button>
<button class="test">Btn x4</button>
<button class="test">Btn x5</button>

<hr>
div:(margin: 0px)
<br><br>

<div>Btn 1</div>
<div>Btn 2</div>
<div>Btn 3</div>
<div>Btn 4</div>
<div>Btn 5</div>


<hr>
span:(margin: 0px)
<br><br>

<span>Btn 1</span>
<span>Btn 2</span>
<span>Btn 3</span>
<span>Btn 4</span>
<span>Btn 5</span>

Upvotes: 2

Related Questions