Столбец Bootstrap 3 имеет странное пространство внутри - PullRequest
Новая
       5

Столбец Bootstrap 3 имеет странное пространство внутри

0 голосов
/ 11 января 2019

Я пытаюсь отобразить 2 изображения в строке и столбце. Я не хочу никаких верхних / нижних пробелов внутри столбца. Как мне это сделать? 

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>

Высота столбца 26px, но должна быть всего 12px.

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Это из-за значения по умолчанию line-height, которое составляет ок. 20px + 2px для границы

0 голосов
/ 11 января 2019

Чтобы удалить ненужный интервал, вы можете добавить line-height: 0; к вашему div, например: 

 <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>

Вы можете найти объяснение этому поведению здесь .

...