Question

我真的很奇怪。我想在矩形中做矩形，但不知道为什么，我不能设置内部矩形的填充顶部。有人可以告诉我为什么吗？

＆＃13;

#outsideRect{
    width: 260px;
    height: 440px;
    background-color: #4084dd;
    border-radius: 10px;
}
#insideRect{
    width: 200px;
    height: 60px;
    background-color: ghostwhite;
    border-radius: 10px;
    margin: 50px auto;

}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="css/style.css">
    
    <script src="scripts/jquery-3.1.0.js"></script>
    <script src="scripts/script.js"></script>
    
</head>
<body>
    
    <div id="page">
        <div id="outsideRect">
            <div id="insideRect">
                as
            </div>

        </div>
    </div>
    
</body>
</html>

＆＃13;

Answer 1

#outsideRect{
    width: 160px;
    height: 440px;
    background-color: #4084dd;
    border-radius: 10px;
}
#insideRect{
    width: 100px;
    height: 60px;
    background-color: ghostwhite;
    border-radius: 10px;
    margin: 50px auto;
}

.page { display: inline-block; }

#outsideRect2{
    width: 160px;
    height: 440px;
    background-color: #4084dd;
    border-radius: 10px;
   padding-top: 20px;
}
#insideRect2{
    width: 100px;
    height: 60px;
    background-color: ghostwhite;
    border-radius: 10px;
    margin: 0 auto;
}

#outsideRect3{
    width: 160px;
    height: 440px;
    background-color: #4084dd;
    border-radius: 10px;
}
#insideRect3{
    width: 100px;
    height: 60px;
    background-color: ghostwhite;
    border-radius: 10px;
    margin: 0 auto;
   padding-top: 20px;
}


#insideRect4{
    width: 100px;
    height: 60px;
    background-color: ghostwhite;
    border-radius: 10px;
    margin: 50px auto;
}


#insideRect5{
    width: 100px;
    height: 60px;
    background-color: ghostwhite;
    border-radius: 10px;
    margin: 0 auto;
}

<div  class="page">
        <div id="outsideRect">
            <div id="insideRect">
                margin on inner rect
            </div>

        </div>
    </div>

    <div  class="page">
        <div id="outsideRect2">
            <div id="insideRect2">
               padding on outer rect
            </div>

        </div>
    </div>

   <div  class="page">
        <div id="outsideRect3">
            <div id="insideRect3">
               padding on inner rect
            </div>

        </div>
    </div>



   <div  class="page">
        <div id="outsideRect">
            <div id="insideRect4">
               margin on inner rect
            </div>
          
          
            <div id="insideRect5">
              no margin or padding on inner rect
            </div>

        </div>
    </div>

填充总是内部元素。保证金是外元素。

如果您希望内部矩形向下移动，您想要将填充添加到外部矩形。

或者你的意思是问为什么内部矩形上的边距不起作用？它在块级元素之间应用于...之外。由于内部矩形是外部矩形的子项，因此父级/子级之间的边距不会结合。它适用于父母之间。请注意，在片段的第4个示例中，边距应用于同一级别的其他元素，但不会在父级/子级之间应用。

Answer 2

#outsideRect{
    width: 260px;
    height: 440px;
    background-color: #4084dd;
    border-radius: 10px;
}
#insideRect{
    width: 200px;
    height: 60px;
    background-color: ghostwhite;
    border-radius: 10px;
    margin: 50px auto;
  padding-top: 30px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="css/style.css">
    
    <script src="scripts/jquery-3.1.0.js"></script>
    <script src="scripts/script.js"></script>
    
</head>
<body>
    
    <div id="page">
        <div id="outsideRect">
            <div id="insideRect">
                as
            </div>

        </div>
    </div>
    
</body>
</html>

解决方案中的填充可以毫无问题地添加到您的解决方案中。

正如Scott所提到的，margin是在元素之外，padding在元素内部。

如果要在解决方案中使用保证金，则需要添加位置。

例如：

#outsideRect{
    width: 260px;
    height: 440px;
    background-color: #4084dd;
    border-radius: 10px;
}
#insideRect{
    position: absolute;
    width: 200px;
    height: 60px;
    background-color: ghostwhite;
    border-radius: 10px;
    margin: 50px auto;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <link rel="stylesheet" href="css/style.css">
    
    <script src="scripts/jquery-3.1.0.js"></script>
    <script src="scripts/script.js"></script>
    
</head>
<body>
    
    <div id="page">
        <div id="outsideRect">
            <div id="insideRect">
                as
            </div>

        </div>
    </div>
    
</body>
</html>

在div中填充div的顶部

2 个答案: