Why does the Edge only move the element Horizontally and not Vertically?

Question

Why does the Edge only move the element Horizontally and not Vertically?

Asked 6 years, 2 months ago

Viewed 187 times

4

Because the Edge in <span> only moves the element sideways, but vertically the edge is outside the container father?

Notice in this example below that when I use the edge on <span> she does not stand out the left of div, but at the top of div the edge is out... The edge seems not to take up space vertically, just horizontally. Why does this happen?

OBS: I don’t want a way to solve this, I know for example putting display:inline-block in the span would solve. What I want to know is why the Edge only occupies horizontal space and not vertical, it pushes the next element to the side, but at the top it does not push, and still stands out from the 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>

1

I think the display influence, if using display: inline-block, it renders different

– Ricardo Pontual

2018/09/12 at 17:33
@Ricardopunctual yes I noticed, even had already written in the question. I just do not know pq on the display default it pushes sideways and not vertically, that’s the question.

– hugocsl

2018/09/12 at 17:38
The span is inline by default, so it obeys the vertical line rule as if it were a text. If you convert it in block, then it will no longer behave as if it were a text and will move vertically away tb.

– Sam

2018/09/12 at 17:57

1 answer

Browser other questions tagged html css css-border

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2018-09-12T18:45:35+00:00

The span as an element inline by default, is restricted to the line in which it is, and does not have can to influence (push) elements in other lines, only within their own.

As the applied edge will pass up to down the line, it just the invade, without influencing the elements that are there, but can influence the elements to the sides, because they are in the same line. This basically differentiates the elements in block and the inline (and many other differences), where those are not restricted to the line where they are located and push all around them, while they only have influence within their own line.

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