Home/ Questions/Q 7431253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T09:16:01+00:00

I’m learning css and was struggling to understand why the html is rendering like

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0