发表新帖
发表新帖

Margin on child element moves parent element

前端 未结
关注
14 2167
广开言路
广开言路 2020-11-21 23:38

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

相关标签:
14条回答
  • 南笙
    2020-11-22 00:23

    I find out that, inside of your .css >if you set the display property of a div element to inline-block it fixes the problem. and margin will work as is expected.

    0 讨论(0)
  • 一整个雨季
    2020-11-22 00:24

    Found an alternative at Child elements with margins within DIVs You can also add:

    .parent { overflow: auto; }

    or:

    .parent { overflow: hidden; }

    This prevents the margins to collapse. Border and padding do the same. Hence, you can also use the following to prevent a top-margin collapse:

    .parent {
    padding-top: 1px;
    margin-top: -1px;
}

    Update by popular request: The whole point of collapsing margins is handling textual content. For example:

    h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
}
    <h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

    Because the browser collapses margins, the text would appear as you'd expect, and the <div> wrapper tags don't influence the margins. Each element ensures it has spacing around it, but spacing won't be doubled. The margins of the <h2> and <p> won't add up, but slide into each other (they collapse). The same happens for the <p> and <ul> element.

    Sadly, with modern designs this idea can bite you when you explicitly want a container. This is called a new block formatting context in CSS speak. The overflow or margin trick will give you that.

    0 讨论(0)
  • 一整个雨季
    2020-11-22 00:24

    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)
  • 后悔当初
    2020-11-22 00:27

    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)
  • 春和景丽
    2020-11-22 00:28

    the parent element has not to be empty at least put &nbsp; before the child element.

    0 讨论(0)
  • 傲寒
    2020-11-22 00:31

    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)
 看不清?
提交回复
热议问题