Why does Edge only move the element horizontally and not vertically?

Navigation
3

Because the border in <span> only moves the element sideways, but vertically the border is out of the parent container?

Notice in this example that when I use the border in <span> it does not get left out of div , however on the top of div the border stays out ... The border does not seem to take up space vertically, only horizontally. Why does this happen?

OBS: I do not want a way to solve this, I know that for example putting display:inline-block on span would solve. What I want to know is why Edge only occupies horizontal space rather than vertical, it pushes the next element to the side, but at the top it does not push, and still stays out of the container , because ? 

.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>
    
asked by anonymous 12.09.2018 / 19:30

1 answer

4

The span because it is an inline element by default, is restricted to the line it is on, and has power to influence (push) elements in other lines, just within your own.

As the applied border will go up and down the line, it only invades , without influencing the elements that are there, but can influence the elements on the sides, since they are on the same line . This basically differentiates elements in block and inline (in addition to many other differences), where those are not restricted to the line where they are located and push > everything that is around, whereas these only have influence within its line.

I made a small illustration that shows the border of the text coming out of the line and invading the bottom and top lines, as the example in the question illustrates:

    
12.09.2018 / 20:45
How to change icon color in drawable layout on android Wrong summer time