div的頂部div div

我真的很奇怪的問題。我想做矩形矩形，但不知道爲什麼，我不能設置內部矩形的填充頂部。有人可以告訴我爲什麼嗎？div的頂部div div

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

來源

2016-08-16 Tomsz Comasz

#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個示例中的margin如何應用於同一級別的其他元素，但不會在父級/子級之間應用。

來源

2016-08-16 20:52:43 Scott

YAS，這就是解決方案:)但是爲什麼它在insideRect dosent與宣稱的「填充頂」的作品？ –

因爲填充是*裏面的元素。因此，在內部矩形中添加「padding-top」可將「as」添加到內部矩形中。 – Scott

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

來源

2016-08-16 21:04:55 Malenko

div的頂部div div

回答

相關問題