Why does just top border of inline element overflow? Why not left border?

Question

I have a div container(fixed width and height) containing an inline element with 10px of border. The top border of inline element overflow. Why not left border? Below is my code.

.container {
 width:100px;
 height:100px;
 border:1px solid black;
}
span {
 border:10px solid red;
 display:inline;
}

<div class = "container">
  <span>
  this is text
</span>
</div>

You can set overflow: auto; on the container to to hide the top of the border. — Any Moose, Sep 11 '18 at 15:01
because you added 20 extra pixels to the height of the element, it breaks out of the line height for the container and therefore protrudes out of the top of it. Either adjust the line-height of the container to be the font-size + 20px or make the span inline block — Pete, Sep 11 '18 at 15:01
But none of this actually explains **why**....which is interesting. — Paulie_D, Sep 11 '18 at 15:04
@Paulie_D - [the line height explains why](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height): The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height. — Pete, Sep 11 '18 at 15:04
Is there a reference for that? If so, it's an answer. Perhaps this - https://www.w3.org/TR/CSS2/visuren.html#inline-formatting — Paulie_D, Sep 11 '18 at 15:05
... or this - https://www.w3.org/TR/CSS2/visudet.html#line-height — Paulie_D, Sep 11 '18 at 15:10
@Paulie_D this also concern padding/margin/border .. only left/right are considered and top/bottom no, because the the height is calculated following this https://www.w3.org/TR/CSS2/visudet.html#inline-non-replaced and the line-height is the only one that control the final height (there is some dupes but not easy to find them ...) — Temani Afif, Sep 11 '18 at 19:45
@BoltClock not easy to find the correct keywords to search with but I am pretty sure I saw at least one similar anwser of Alohci about this. The closest one I could find is this one : https://stackoverflow.com/questions/11700985/margin-top-not-working-for-span-element — Temani Afif, Sep 12 '18 at 13:05

score 2 · Accepted Answer · answered Sep 12 '18 at 12:32

The top and bottom borders of an inline element have no effect on its layout, or the layout of surrounding boxes. Only its left and right borders do — these, along with left and right margins and padding, push the content further away from surrounding boxes. From the spec:

Horizontal margins, borders, and padding are respected between these boxes.

Girisha C · Answer 2 · 2018-09-11T16:01:19.200

Top and bottom border do not affect inline elements because inline elements flow with content on the page. You can set left and right border/margins/padding on an inline element but not top or bottom because it would disrupt the flow of content.

.container {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
span {
  border: 10px solid red;
  display: inline;
  padding: 10px;
  margin: 10px;
}

<div class="container">
  <span>
    this is text
  </span>
</div>

score -1 · Answer 3 · edited Sep 12 '18 at 12:24

-1

.container{
  width: 100px
  height: 100px
  border: 1px solid black
}

span{
  border: 10px solid red
  display: inline
  padding: 10px
  margin: 10px
}

edited Sep 12 '18 at 12:24

MostafaMashayekhi

27,359
3
21
39

answered Sep 11 '18 at 16:29

user1618811

47
2
9

Why does just top border of inline element overflow? Why not left border?

3 Answers3

Related