Porque a Borda no <span>
só afasta o elemento lateralmente, porém verticalmente a borda fica para fora do container pai?
Repare nesse exemplo abaixo que quando eu uso a borda no <span>
ela não fica para fora a esquerda da div
, porém no top da div
a borda fica para fora... A borda parece não ocupar espaço na vertical, apenas na horizontal. Por que isso acontece?
OBS: eu não quero um jeitinho para resolver isso, eu sei que por exemplo colocando display:inline-block
no span
resolveria. O que eu quero saber é por que a Borda só ocupa espaço horizontal e não vertical, ela empurra o próximo elemento para o lado, mas no topo ela não empurra, e ainda fica para fora do container, pq?
.container {
width:200px;
height:100px;
border:1px solid black;
}
span {
border:10px solid red;
/* display:inline; */
}
<div class = "container">
<span>text</span><span>text</span>
</div>
<div class = "container">
<span>text</span><br>
<span>text</span><br>
</div>
display
influencia, se usardisplay: inline-block
, ele renderiza diferente