gpt4 book ai didi

css - div 内部的 padding-top

转载 作者:太空宇宙 更新时间:2023-11-03 21:19:20 24 4
gpt4 key购买 nike

我有一个很奇怪的问题。我想在矩形中做矩形,但不知道为什么,我无法设置 inside-rectangle 的 padding-top。谁能告诉我为什么?

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

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

最佳答案

#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>

内边距总是在元素的内部。边距在元素之外

如果您希望内部矩形向下移动,则需要向外部 矩形添加填充。

或者您的意思是问为什么内部矩形的边距不起作用?它应用在外部…… block 级元素之间。由于内部矩形是外部矩形的子项,因此边距不会在父项/子项之间联合。它在 parent 之间得到应用。请注意在代码片段的第 4 个示例中,边距如何应用于同一级别的其他元素,但它不会在父/子元素之间应用。

关于css - div 内部的 padding-top,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38984228/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com