为什么边距顶部不能正常工作？

所以我试图让里面有文字的红色框下降 100px，但它的效果不如你从这张图片中看到的那么好（https://gyazo.com/786598af68920c4900aac6ba6a5b3022）似乎它也在拿support_wrapperdiv 并将其向下移动 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>

您正在处理边距崩溃

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

   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>

尝试在开头添加以下内容的 #form_wrapper：

position: absolute;

让我听听这是否有效:)

尝试填充顶部，您不能在已经具有固定大小的div内部留边距。（我只是猜测，我遇到了同样的问题，只是使用了填充）

相关内容

最新更新

热门标签：