<br>タグに水平なスペースがありますか？

Question

私は、異なる2行をbrタグで垂直方向に区切られた2行から垂直方向に区切られた理由を理解できません。ここで

は例です：クロームdevのツールで https://jsfiddle.net/qzgeassf/

span.block { 
 
    display: block; 
 
} 
 

 
div { 
 
    text-align: center; 
 
} 
 

 
.border { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div> 
 
    <nav class="bottom-nav"> 
 
    <span class="border"> 
 
     <span>PORTFOLIO</span> 
 
     <br> 
 
     <span><i class="glyphicon glyphicon-circle-arrow-down"></i></span> 
 
    </span> 
 
    </nav> 
 
</div> 
 

 
<div> 
 
    <span class="border"> 
 
    <span class="block">PORTFOLIO</span> 
 
    <span><i class="glyphicon glyphicon-circle-arrow-down"></i></span> 
 
    </span> 
 
</div>

私は最初の行の末尾にそのスペースを取っているかを見ることができません。

Answer 1

あなたが見ているのは、blockスパン以外の空白です。インライン要素間の空白を削除し、幅は同じです。

span.block { 
 
    display: block; 
 
} 
 

 
div { 
 
    text-align: center; 
 
} 
 

 
.border { 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div> 
 
    <nav class="bottom-nav"><span class="border"><span>PORTFOLIO</span><br><span><i class="glyphicon glyphicon-circle-arrow-down"></i></span></span></nav> 
 
</div> 
 

 
<div> 
 
    <span class="border"> 
 
    <span class="block">PORTFOLIO</span> 
 
    <span><i class="glyphicon glyphicon-circle-arrow-down"></i></span> 
 
    </span> 
 
</div>