Margin on child element moves parent element

2018-12-31 03:16发布

站内问答 / HTML/CSS
1197 14 1

I have a div (parent) that contains another div (child). Parent is the first element in body with no particular CSS style. When I set

.child
{
    margin-top: 10px;
}

The end result is that top of my child is still aligned with parent. Instead of child being shifted for 10px downwards, my parent moves 10px down.

My DOCTYPE is set to XHTML Transitional.

What am I missing here?

edit 1
My parent needs to have strictly defined dimensions because it has a background that has to be displayed under it from top to bottom (pixel perfect). So setting vertical margins on it is a no go.

edit 2
This behaviour is the same on FF, IE as well as CR.

14条回答
十年一品温如言
2楼-- · 2018-12-31 03:37

I had this problem too but preferred to prevent negative margins hacks, so I put a

<div class="supercontainer"></div>

around it all which has paddings instead of margins. Of course this means more divitis but it's probably the cleanest way to do get this done properly.

查看更多
0人赞 添加讨论(0) 举报
大哥的爱人
3楼-- · 2018-12-31 03:38

add style display:inline-block to child element

查看更多
0人赞 添加讨论(0) 举报
回忆，回不去的记忆
4楼-- · 2018-12-31 03:39

interestingly my favorite solution to this problem isn't yet mentioned here: using floats.

html:

<div class="parent">
    <div class="child"></div>
</div>

css:

.parent{width:100px; height:100px;}
.child{float:left; margin-top:20px; width:50px; height:50px;}

see it here: http://codepen.io/anon/pen/Iphol

note that in case you need dynamic height on the parent, it also has to float, so simply replace height:100px; by float:left;

查看更多
0人赞 添加讨论(0) 举报
永恒的永恒
5楼-- · 2018-12-31 03:40

The margin of the elements contained within .child are collapsing.

<html>
<style type="text/css" media="screen">
    #parent {background:#dadada;}
    #child {background:red; margin-top:17px;}
</style>
<body>
<div id="parent">

    <p>&amp;</p>

    <div id="child">
        <p>&amp;</p>    
    </div>

</div>
</body>
</html>

In this example, p is receiving a margin from the browser default styles. Browser default font-size is typically 16px. By having a margin-top of more than 16px on #child you start to notice it's position move.

查看更多
0人赞 添加讨论(0) 举报
步步皆殇っ
6楼-- · 2018-12-31 03:40

An alternative solution I found before I knew the correct answer was to add a transparent border to the parent element.

Your box will use extra pixels though... 

.parent {
    border:1px solid transparent;
}
查看更多
0人赞 添加讨论(0) 举报
明月照影归
7楼-- · 2018-12-31 03:41

Using top instead of margin-top is another possible solution, if appropriate.

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(1)