为什么这个内联元素的顶部边框不显示，为什么使用float更正这个？ [英] Why is the top border of this inline element not displaying and why does using float correct this?

问题描述

http://jsbin.com/ofojis/edit#preview

http://jsbin.com/ofojis/edit#source

1. 为什么不显示此内嵌元素的上边框？


2. 添加 float：left 将此内联元素向下推，并呈现
   。 float：left 实际上是向下推，不是
   应该向左推一个元素？


3. 另外，你不应该在< span> ？inline
   元素上使用margin属性吗？

1. Why is the top border of this inline element not displaying?
2. Adding float:left pushes this inline element down and it renders well. How does float:left actually push it down, isn't it supposed to push an element to the left?
3. Also, are you not supposed to use the margin property on inline elements like <span>?

推荐答案

在这个例子中如何渲染轮廓，边框和填充的技术说明？ ：）

Technical explanation of how outline, border and padding are rendered in this example? ? :)

1. 因为< span> $ c> inline 元素， inline 元素的位置从填充的左上角开始（不计边框和边距）。

1. Because <span> is an inline element, and the positioning of inline elements starts from the top-left of the padding (not counting the border and margin).

float：left 适用 display：inline-block ，这意味着它不再 inline 。 inline-block 元素的位置从边距的左上角开始。

float: left applies display: inline-block, which means that it's no longer inline. The positioning for inline-block elements starts from the top-left of the margin.

在< span> 上使用 margin ，但不会有用：P

You can use margin on a <span> but it won't do anything useful :P

这篇关于为什么这个内联元素的顶部边框不显示，为什么使用float更正这个？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！