为什么 margin-top 不能正常工作？

Question

所以我试图让里面有文字的红色框缩小 100 像素，但效果并不如您在这张图片中看到的那样好 (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

尝试在开头添加到#form_wrapper：

position: absolute;

让我听听这是否有效:)

Answer 2

试试 padding-top，你不能在已经有设定大小的 div 内部留边距。（我只是猜测，我遇到了同样的问题，只是使用了填充）

Answer 3

您正在处理margin collapsing

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

   border-top:1px solid transparent;

 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;
 }

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

为什么 margin-top 不能正常工作？

Why isn't margin-top working correctly?

html

css

styles