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の例では、同じレベルの他の要素にマージンが適用されますが、親子間にマージンが適用されないことに注意してください。

出典

2016-08-16 20:52:43 Scott

YASは、ソリューションのthats :)しかし、なぜそれが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が述べたように、マージンは要素の外側にあり、パディングは要素の内側にあります。

ソリューションでマージンを使用する場合は、位置を追加する必要があります。例えば

：

#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のパディングトップ

答えて

関連する問題