Home/ Questions/Q 7442071
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T11:07:14+00:00

http://jsbin.com/ofojis/edit#preview http://jsbin.com/ofojis/edit#source Why is the top border of this inline element not displaying? Adding

  • 0

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

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

  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>?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    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).

    2. 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.

    3. You can use margin on a <span> but it won’t do anything useful 😛

    • 0