为什么仅内联元素的顶部边框溢出？为什么不留边界？ [英] Why does just top border of inline element overflow? Why not left border?

问题描述

我有一个div容器（宽度和高度固定），其中包含带有10px边框的内联元素。
内联元素溢出的顶部边界。为什么不留边界？
以下是我的代码。

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>

推荐答案

内联元素的顶部和底部边框对其布局或周围框的布局没有影响。只有它的左右边界才有效-这些以及左右边界和填充将内容推离周围的盒子。从规范：

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.

这篇关于为什么仅内联元素的顶部边框溢出？为什么不留边界？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！