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

user_9274988 0
Viewed 480

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>

css html
3 Answers

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.

user_1062240

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>

user_25606420 

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

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

user_16188110
Related