Why div box appear at different height even is the specified is the same-CodePudding

Hi I am creating some div box in html which appear ad different height even if the specified in the css is the same The code is the following and how is it is shown the boxes are at different height in the html page even if the height specified is the same

<!DOCTYPe html>

<style>
#Box1{
    margin-top:60px;
    margin-left:850px;
    height:80px;
    width:200px;
    border: 5px solid black;
}


#Box2{
    margin-top:60px;
    margin-left:1050px;
    height:80px;
    width:200px;
    border: 5px solid black;
}


#Box3{
    margin-top:60px;
    margin-left:550px;
    height:80px;
    width:200px;
    border: 5px solid black;
}
</style>


<head>
  <!--  <link rel="stylesheet" href="style3.css"/> -->
</head>


<body>

<div id="Box1">
  <p style="text-align:center;margin-top: 15px; font-size:150%">1000 Women <BR>Woman over 40</p>
</div>

<div id ="Box2">
  <p style="text-align:center;margin-top: 15px; font-size:150%">1000 Women <BR>Woman over 40</p>
</div>



<div id="Box3">
  <p style="text-align:center;margin-top: 15px; font-size:150%">1000 Women <BR>Woman over 40</p>
</div>


</body>

Some has an idea about the reason? Is there something wrong in the code?

CodePudding user response：

You can use flex rather than margin to set boxes at the same height. Wrap it with container div and remove the margin-left in my view it is not needed.

.container{
display:flex;
justify-content: space-around;
}

#Box1{
    margin-top:60px;
    height:80px;
    width:200px;
    border: 5px solid black;
}


#Box2{
    margin-top:60px;
    height:80px;
    width:200px;
    border: 5px solid black;
}


#Box3{
    margin-top:60px;
    height:80px;
    width:200px;
    border: 5px solid black;
}

<div >
<div id="Box1">
  <p style="text-align:center;margin-top: 15px; font-size:150%">1000 Women <BR>Woman over 40</p>
</div>

<div id ="Box2">
  <p style="text-align:center;margin-top: 15px; font-size:150%">1000 Women <BR>Woman over 40</p>
</div>



<div id="Box3">
  <p style="text-align:center;margin-top: 15px; font-size:150%">1000 Women <BR>Woman over 40</p>
</div>
</div>