0

我想做的是给一个 divmargin-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;



}
4

4 回答 4

2

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

如果做不到这一点，您可以根据先前关于该主题的讨论在父级上使用溢出：自动，而这个也是如此。

于 2013-06-03T15:06:53.353 回答
0

尝试添加padding:0.01px到容器中。这不会产生视觉效果，但会导致将边距应用到正确的位置。

于 2013-06-03T15:08:55.670 回答
0

这是<h1>. 这对我来说似乎总是违反直觉的。overflow: auto;您可以通过放置容器或将h1s 边距更改为填充来修复它。

于 2013-06-03T15:09:15.533 回答
0

你必须改变

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

至

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

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

于 2013-06-03T15:09:58.703 回答