Question

我要做的是给一个div margin-top: 30px;但它似乎将整个页面向下移动了30px，而不是只有那个div。这就像孩子div正在影响父div？

有什么建议吗？

HTML：

   <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="BBcolForum.master.cs" Inherits="BBcolForum.BBcolForum" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/default.css" />    
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>

<div id="content">
  <form id="form1" runat="server">

  <div class="header" style="margin-top:0px;">
  <h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>
  </div>

    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">



        </asp:ContentPlaceHolder>
    </div>



    </form>
</div>


</body>
</html>

CSS;

body 
{
    background-image:url('/img/blue_back.png');
    background-repeat:repeat-x;

}

#content
{
    background-color:White;
    width: 800px;
    height:900px;
    margin: 0 auto 0 auto;   

}

.header
{
    border-bottom:1px solid #000000;
    height:100px;    
    color:Blue;



}

Answer 1

这正是发生了什么，是的。具有margin-top的元素的直接子元素也将推送父元素。作为一个非常简单/快速的解决方案，您是否考虑使用填充？

如果失败，您可以根据this previous discussion on the topic和this one too对父级使用overflow：auto。

Answer 2

尝试将padding:0.01px添加到容器中。这将没有视觉效果，但它会使边距应用于正确的位置。

Answer 3

这是<h1>的余量。这对我来说似乎总是很直观。您可以通过将overflow: auto;放在容器上或将h1边距更改为填充来修复它。

Answer 4

你必须改变

<h1 style="color:Aqua; margin-top:30px;">Student Forum</h1>

到

<h1 style="color:Aqua; padding-top:30px;">Student Forum</h1>

margin应用对象外部的空间，而padding将其应用于内部。

儿童div影响父母div？

4 个答案: