2

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>?
user784637
  • 15,392
  • 32
  • 93
  • 156

1 Answers1

5

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 :P

Community
  • 1
  • 1
Joe
  • 15,669
  • 4
  • 48
  • 83
  • I'm a slow learner lol. Thanks for your answer. Your #2 was particularly enlightening. I was confused because margins seemed to work when I applied `float:left` to `` but it all makes sense now =). Can you recommend any guides written in layman terms for me? w3schools doesn't go over the finer details the way you did. – user784637 Feb 08 '12 at 15:04
  • 1
    Lol, fair enough. It's certainly not obvious that `float` applies `inline-block`, took me some time to realise that myself. I don't know of any guides that go into that kind of depth, you just learn it as you get older :P – Joe Feb 08 '12 at 15:06
  • Also Joe, for your #1, do block elements start from the top left (counting padding and margin)? – user784637 Feb 08 '12 at 15:07
  • 1
    Yep - inline ignores border and margin for its positioning. Inline-block and block take everything into account. – Joe Feb 08 '12 at 15:09
  • @Joe in this [link](http://stackoverflow.com/questions/26308944/cant-see-the-border-top-in-this-inline-element) I can see inline element doesn't ignore the border-left, just the border-top. Or maybe I'm wrong. – Doc Kodam Oct 10 '14 at 23:24