CODEWITHSUNDEEP
css
user784637
user784637

Reputation: 16142

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

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

http://jsfiddle.net/46nVs/

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.

  1. However I was confused as to why border is being cut off from the top. Any ideas?

  2. What css can be applied to the <span> element to make the entire outline and border display?

  3. Also, is it ever considered okay to place an inline element next to a block element like <span>somestuff</span><div>somecontent</div>?

Upvotes: 1

Views: 428

Answers (3)

George Katsanos
George Katsanos

Reputation: 14185

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)

Upvotes: 1

Joe
Joe

Reputation: 15802

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

Upvotes: 2

Sagar Patil
Sagar Patil

Reputation: 1948

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.

Upvotes: 1

Related Questions