Question

我正在尝试在行和列中显示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。

Answer 1

要删除多余的空格，可以将<button onclick="plotpoint('1')" id="1">&nbsp</button><button onclick="plotpoint('2')" id="2">&nbsp</button><button onclick="plotpoint('3')" id="3">&nbsp</button><button onclick="plotpoint('4')" id="4">&nbsp</button><button onclick="plotpoint('5')" id="5">&nbsp</button><button onclick="plotpoint('6')" id="6" class="axis">5</button><button onclick="plotpoint('7')" id="7">&nbsp</button><button onclick="plotpoint('8')" id="8">&nbsp</button><button onclick="plotpoint('9')" id="9">&nbsp</button><button onclick="plotpoint('10')" id="10">&nbsp</button><button onclick="plotpoint('11')" id="11">&nbsp</button><br><button onclick="plotpoint('12')" id="12">&nbsp</button><button onclick="plotpoint('13')" id="13">&nbsp</button><button onclick="plotpoint('14')" id="14">&nbsp</button><button onclick="plotpoint('15')" id="15">&nbsp</button><button onclick="plotpoint('16')" id="16">&nbsp</button><button onclick="plotpoint('17')" id="17" class="axis">4</button><button onclick="plotpoint('18')" id="18">&nbsp</button><button onclick="plotpoint('19')" id="19">&nbsp</button><button onclick="plotpoint('20')" id="20">&nbsp</button><button onclick="plotpoint('21')" id="21">&nbsp</button><button onclick="plotpoint('22')" id="22">&nbsp</button><br><button onclick="plotpoint('23')" id="23">&nbsp</button><button onclick="plotpoint('24')" id="24">&nbsp</button><button onclick="plotpoint('25')" id="25">&nbsp</button><button onclick="plotpoint('26')" id="26">&nbsp</button><button onclick="plotpoint('27')" id="27">&nbsp</button><button onclick="plotpoint('28')" id="28" class="axis">3</button><button onclick="plotpoint('29')" id="29">&nbsp</button><button onclick="plotpoint('30')" id="30">&nbsp</button><button onclick="plotpoint('31')" id="31">&nbsp</button><button onclick="plotpoint('32')" id="32">&nbsp</button><button onclick="plotpoint('33')" id="33">&nbsp</button><br><button onclick="plotpoint('34')" id="34">&nbsp</button><button onclick="plotpoint('35')" id="35">&nbsp</button><button onclick="plotpoint('36')" id="36">&nbsp</button><button onclick="plotpoint('37')" id="37">&nbsp</button><button onclick="plotpoint('38')" id="38">&nbsp</button><button onclick="plotpoint('39')" id="39" class="axis">2</button><button onclick="plotpoint('40')" id="40">&nbsp</button><button onclick="plotpoint('41')" id="41">&nbsp</button><button onclick="plotpoint('42')" id="42">&nbsp</button><button onclick="plotpoint('43')" id="43">&nbsp</button><button onclick="plotpoint('44')" id="44">&nbsp</button><br><button onclick="plotpoint('45')" id="45">&nbsp</button><button onclick="plotpoint('46')" id="46">&nbsp</button><button onclick="plotpoint('47')" id="47">&nbsp</button><button onclick="plotpoint('48')" id="48">&nbsp</button><button onclick="plotpoint('49')" id="49">&nbsp</button><button onclick="plotpoint('50')" id="50" class="axis">1</button><button onclick="plotpoint('51')" id="51">&nbsp</button><button onclick="plotpoint('52')" id="52">&nbsp</button><button onclick="plotpoint('53')" id="53">&nbsp</button><button onclick="plotpoint('54')" id="54">&nbsp</button><button onclick="plotpoint('55')" id="55">&nbsp</button><br><button onclick="plotpoint('56')" id="56" class="axis">-5</button><button onclick="plotpoint('57')" id="57" class="axis">-4</button><button onclick="plotpoint('58')" id="58" class="axis">-3</button><button onclick="plotpoint('59')" id="59" class="axis">-2</button><button onclick="plotpoint('60')" id="60" class="axis">-1</button><button onclick="plotpoint('61')" id="61" class="axis">0</button><button onclick="plotpoint('62')" id="62" class="axis">1</button><button onclick="plotpoint('63')" id="63" class="axis">2</button><button onclick="plotpoint('64')" id="64" class="axis">3</button><button onclick="plotpoint('65')" id="65" class="axis">4</button><button onclick="plotpoint('66')" id="66" class="axis">5</button><br><button onclick="plotpoint('67')" id="67">&nbsp</button><button onclick="plotpoint('68')" id="68">&nbsp</button><button onclick="plotpoint('69')" id="69">&nbsp</button><button onclick="plotpoint('70')" id="70">&nbsp</button><button onclick="plotpoint('71')" id="71">&nbsp</button><button onclick="plotpoint('72')" id="72" class="axis">-1</button><button onclick="plotpoint('73')" id="73">&nbsp</button><button onclick="plotpoint('74')" id="74">&nbsp</button><button onclick="plotpoint('75')" id="75">&nbsp</button><button onclick="plotpoint('76')" id="76">&nbsp</button><button onclick="plotpoint('77')" id="77">&nbsp</button><br><button onclick="plotpoint('78')" id="78">&nbsp</button><button onclick="plotpoint('79')" id="79">&nbsp</button><button onclick="plotpoint('80')" id="80">&nbsp</button><button onclick="plotpoint('81')" id="81">&nbsp</button><button onclick="plotpoint('82')" id="82">&nbsp</button><button onclick="plotpoint('83')" id="83" class="axis">-2</button><button onclick="plotpoint('84')" id="84">&nbsp</button><button onclick="plotpoint('85')" id="85">&nbsp</button><button onclick="plotpoint('86')" id="86">&nbsp</button><button onclick="plotpoint('87')" id="87">&nbsp</button><button onclick="plotpoint('88')" id="88">&nbsp</button><br><button onclick="plotpoint('89')" id="89">&nbsp</button><button onclick="plotpoint('90')" id="90">&nbsp</button><button onclick="plotpoint('91')" id="91">&nbsp</button><button onclick="plotpoint('92')" id="92">&nbsp</button><button onclick="plotpoint('93')" id="93">&nbsp</button><button onclick="plotpoint('94')" id="94" class="axis">-3</button><button onclick="plotpoint('95')" id="95">&nbsp</button><button onclick="plotpoint('96')" id="96">&nbsp</button><button onclick="plotpoint('97')" id="97">&nbsp</button><button onclick="plotpoint('98')" id="98">&nbsp</button><button onclick="plotpoint('99')" id="99">&nbsp</button><br><button onclick="plotpoint('100')" id="100">&nbsp</button><button onclick="plotpoint('101')" id="101">&nbsp</button><button onclick="plotpoint('102')" id="102">&nbsp</button><button onclick="plotpoint('103')" id="103">&nbsp</button><button onclick="plotpoint('104')" id="104">&nbsp</button><button onclick="plotpoint('105')" id="105" class="axis">-4</button><button onclick="plotpoint('106')" id="106">&nbsp</button><button onclick="plotpoint('107')" id="107">&nbsp</button><button onclick="plotpoint('108')" id="108">&nbsp</button><button onclick="plotpoint('109')" id="109">&nbsp</button><button onclick="plotpoint('110')" id="110">&nbsp</button><br><button onclick="plotpoint('111')" id="111">&nbsp</button><button onclick="plotpoint('112')" id="112">&nbsp</button><button onclick="plotpoint('113')" id="113">&nbsp</button><button onclick="plotpoint('114')" id="114">&nbsp</button><button onclick="plotpoint('115')" id="115">&nbsp</button><button onclick="plotpoint('116')" id="116" class="axis">-5</button><button onclick="plotpoint('117')" id="117">&nbsp</button><button onclick="plotpoint('118')" id="118">&nbsp</button><button onclick="plotpoint('119')" id="119">&nbsp</button><button onclick="plotpoint('120')" id="120">&nbsp</button><button onclick="plotpoint('121')" id="121">&nbsp</button>添加到div中，如下所示：

line-height: 0;

您可以找到有关此行为here的解释。

Answer 2

这是因为默认的line-height大约是。 20px + 2px作为边框

Bootstrap 3列内部有奇怪的空间

2 个答案: