Bootstrap 3 column has weird space inside

Question

I'm trying to display 2 images inside a row and column. I don't want any top/bottom spaces inside column. How do I do that?

img {
 vertical-align: top!important; 
}
.col-md-6 {
 border: 1px solid black;    
}

<!DOCTYPE html>
<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
  <div class="row">
   <div class="col-md-6">
     <img src="https://via.placeholder.com/13x11/">
        <img src="https://via.placeholder.com/77x12/" style="margin: 0 0 0 7px">
    </div>
  </div>
</div>
</body>
</html>

The column has 26px height but should have just 12px.

Helenesh · Accepted Answer · 2019-01-11T14:30:13.797

0

To remove the unwanted spacing, you can add line-height: 0; to your div, like so:

 <div class="col-md-6" style="line-height: 0">
       <img src="https://via.placeholder.com/13x11/">
       <img src="https://via.placeholder.com/77x12/" style="margin: 0 0 0 7px">
</div>

You can find an explanation for this behaviour here.

edited Jan 11 '19 at 14:30

answered Jan 11 '19 at 14:07

Helenesh

3,999
2
21
36

1

sorry, I'm talking about top/bottom spaces. If you run the example you can see there's a big space after the images – Hmm Jan 11 '19 at 14:13

score 0 · Answer 2 · answered Jan 11 '19 at 14:34

0

That's beacause of the default line-height which is approx. 20px + 2px for the border

answered Jan 11 '19 at 14:34

Francesco G.

164
1
6

Bootstrap 3 column has weird space inside

2 Answers2