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

Question

I'm learning css and was struggling to understand why the html is rendering like so:

I can understand why the the red border is being cut off from the top and left. It's because outlines don't take up space since they're drawn outside of the box: https://developer.mozilla.org/en/CSS/outline. In this example they're being drawn outside of the <body> element.

However I was confused as to why border is being cut off from the top. Any ideas?
What css can be applied to the <span> element to make the entire outline and border display?
Also, is it ever considered okay to place an inline element next to a block element like <span>somestuff</span><div>somecontent</div>?

Joe · Answer 1 · 2012-02-08T12:47:35.467

2

Border (and padding, for that matter) are being cut off due to <span> being an inline element.

Any block level element (or anything with display: inline-block) is subject to different rules (eg. can have width set), and one of those rules says "Block elements are positioned from the start of the border, inline are position from the start of the content".

Quick Edit: You've changed your question, and Sagar has answered the other parts of it well enough for me not to bother :)

edited Feb 08 '12 at 12:47

answered Feb 08 '12 at 12:42

Joe

15,669
4
48
83

where I can find those position concepts? – Doc Kodam Oct 11 '14 at 02:50

score 1 · Accepted Answer · answered Feb 08 '12 at 12:45

1

Point 1:

If you add a float:left or a display:block, the box will render correctly. This is because span is an inline element.

Point 2:

Add the following:

margin:10px 0 0 10px;
float:left;

Point 3: You can place an inline element next to a block element as the design requires. You can also change the display style of the inline element by setting display:block or display:inline-block or any of the other display values allowed.

answered Feb 08 '12 at 12:45

Sagar Patil

1,938
13
21

Thanks I really appreciate it. I thought you're not supposed to use margins for inline elements> – user784637 Feb 08 '12 at 13:22
In this case the element is floated so it follows `float` rules and hence the margin works. – Sagar Patil Feb 08 '12 at 18:32

score 1 · Answer 3 · answered Feb 08 '12 at 12:58

In addition to what others commented, the thing to remember here is not to use span's unless you want to do color or font changes (by applying a class), for example:

<div class="post">
  <div class="post_information">
    <span class="date">11/1/2012</span>
    <span class="author">Mr. Smith</span>
  </div>
  <p>Lorem ipsum</p>
</div>

.date {font-weight:bold;}
.author {color:#ff0000;}

If you want a "box" behavior, use a div or a p instead. Overriding the default behavior of span to make it display as block, although technically possible, will probably mean you are using the wrong element or your HTML is not semantic enough. (span has no semantic value)

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

3 Answers3

Linked