Tomsz Comasz Tomsz Comasz - 3 months ago 9
CSS Question

Padding-top of div inside div

I have really weird problem. I want to do rectangle in rectangle, but dont know why, i cant set padding-top of inside-rectangle. Can somebody tell my why?



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




Answer

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

Padding is always inside the element. Margin is outside the element.

You want to add padding to the outer rectangle if you want the inner rectangle to move down.

Or do you mean to ask why your margin on the inner rectangle isn't working? It's applied outside... between block level elements. Since the inner rectangle is a child of the Outer rectangle, the margin doesn't get allied between parent/child. It get applied between parents. Note how in the 4th example in the snippet the margin is applied to other elements at the same level, but it does not get applied between the parent/child.

Comments