Question

所以我试图让内部带有文字的红色框下降到100px，但它的效果并不像你能看到的那样（https://gyazo.com/786598af68920c4900aac6ba6a5b3022）似乎它也采用了support_wrapper div并将其降低了100px。我到处寻找，我很抱歉提出一个简单的问题，我似乎无法找到答案，但请，任何帮助都会很棒:)

<html>
    <head>
        <style>
            body {
                background-color: #252525;          
            }
            #support_wrapper {


                /* Setting the size of the wrapper */
                width: 1200px;
                height: 1600px;

                /* Backgrond image properties */
                background-image: url("Support.png");
                background-position: center;
                background-repeat: none;

                /* Center the div */
                margin: 0 auto;
                padding: 0 auto;

            }
            #form_wrapper {

                /* Debugging */
                border: 1px solid black;
                background-color: red;

                margin-top: 100px;
            }

        </style>
    </head>
    <body>
        <div id="support_wrapper">
            <div id="form_wrapper">
                <p>  text in the form box </p>
            </div>
        </div>

    </body>
</html>

Answer 1

您正在处理margin collapsing

要将子边距保留在容器内，您可以使用透明边框

   border-top:1px solid transparent;

＆＃13;

 body {
   background-color: #252525;
 }
 #support_wrapper {
   /* Setting the size of the wrapper */
   width: 1200px;
   height: 1600px;
   /* Backgrond image properties */
   background-image: url("Support.png");
   background-position: center;
   background-repeat: none;
   /* Center the div */
   margin: 0 auto;
   padding: 0 auto;
   background:yellow;/* show me */
   border-top:1px solid transparent;/* prevent collapsing margin */
 }
 #form_wrapper {
   /* Debugging */
   border: 1px solid black;
   background-color: red;
   margin-top: 100px;
 }

＆＃13;

<div id="support_wrapper">
  <div id="form_wrapper">
    <p>text in the form box</p>
  </div>
</div>

＆＃13;

Answer 2

尝试在开头添加#form_wrapper：

Id

让我听听这是否有效：）

Answer 3

尝试填充顶部，您可以在已经具有设置大小的div内部进行边距。（我只是猜测，我遇到了同样的问题并且只使用了填充）

为什么margin-top工作正常？

3 个答案: