CODEWITHSUNDEEP
css
stackjlei
stackjlei

Reputation: 10035

How do margins work on floated elements and elements around them?

Looking at the bottom example here, if you give .after-box a margin-top:5px it doesn't make a difference as it'll stay in the same location. But if you give .box a margin-bottom:5px it'll move the .after-box down. Why is it that on floated elements, their margin matters but other elements around them don't?

Upvotes: 0

Views: 25

Answers (1)

claudios
claudios

Reputation: 6656

Hey margins don't move floated html elements, instead they push it away. To give a fake margins on floated elements is to put the content inside another container then apply padding.

.outer {
    float: left;
    padding: 20px;
}

.inner {
 //styles here..
}

Upvotes: 1

Related Questions