CODEWITHSUNDEEP
htmlcssdommargin
maze star
maze star

Reputation: 13

HTML inline elements and vertical/horizontal margins

In the fiddle - http://jsfiddle.net/dddaaLwL/ you can see that horizontal margins have an effect on the inline elements. and vertical margins do not have an effect. Is this right? why so?

#s1 {
margin-left: 40px;
}
#s2 {
margin-top: 40px;
}

Upvotes: 1

Views: 947

Answers (3)

dippas
dippas

Reputation: 60563

Yes your fiddle is correct. why?

An inline element occupies only the space bounded by the tags that define the inline element.

More info HERE

Examples of Inline Elements:

<a>,<span>,<b>,<em>,<i>,<cite>,<mark>, and <code>

More about Inline Elements

An inline element has, but may not be limited to, the following characteristics:

  • Flows along with text content, thus
  • Will not clear previous content to drop to the next line like block elements Is subject to white-space settings in CSS
  • Will ignore top and bottom margin settings, but will apply left and right margins, and any padding
  • Will ignore the width and height properties
  • If floated left or right, will automatically become a block-level element, subject to all block characteristics
  • Is subject to the vertical-align property

More info HERE

Upvotes: 1

Brandon Anzaldi
Brandon Anzaldi

Reputation: 7270

Actually, vertical margins do have an effect on inline elements, but because the element above it isn't a block, it's actually using the margin from the top of the page instead of the previous element. Let's take a quick look at the box model:

Box Model Image

Because inline elements don't handle bounding in the same way that block type elements do. They can only hold data, and other inline elements, and they follow the constraints of the parent element, and only exert influence over their individual space.

However, if they were inline-block elements, you'd see a different result:

Inline Block Box Model

As you can see, inline-block elements can actually influence the behaviour of other elements, whereas inline elements do not.

See Also:

MDN Documentation on Inline Elements

MDN Documentation on Block-level Elements

Upvotes: 1

Pavan JDev
Pavan JDev

Reputation: 202

Have a look at below jsfiddle

#s1 {
    margin-left: 40px;
}
#s2 {
    margin-top: 100px;
}
<span id="s1"> span 1 </span>
<br>
<br>
<span id="s2"> span 2 </span>
    
    <p id="s2"> p 3 </p>

p and div elements are block level elements where span is an inline element and hence margin on span wont work.

Upvotes: 0

Related Questions