margin-top in a nested div

Question

I have a problem with the margin-top in a nested div -- when I apply margin-top to the nested div, the margin is applied to the parent div inst

Answer 1

This is how margins work.. the margin is the space between the next element with a margin / padding / similar. It is not necessarily defined as its parent element. Consult the spec.

Here are some things you can do as a workaround

Use Padding Instead

This just means instead of using margin-top: 10px; you use padding-top: 10px;. This is not suitable for every occasion.

Weird Hack I Discovered

I doubt I discovered this initially, but the other day I solved the problem like this. I had a

that I wanted to give a top margin too, and its top margin was pushing the parent (body element) down as well. So I did this on the body element...

body {
    padding-top: 1px;
    margin-top: -1px;
}

This made my margin work. You can also try using a border, like border: 1px solid #ccc.

It would also be wise to leave a note in the CSS comments to explain why you have that peculiar pair of rules. I just added /* this is to stop collapsing margins */.

Further Reading

Check out these other questions on Stack Overflow

0 讨论(0)

查看其它6个回答

发布评论:

提交评论

---

•  加载中...