Could use some help with a seemingly simple question, I just need some clarity on this issue.
Background:
I am working on developing a complex website and one of my ideas involves generating a series of boxes on the screen. For various reasons that are too complicated to explain here, I have opted for organizing these boxes using a parent-child structure within my HTML. This is because setting the value of the child div's position to be 100% away (Top, Left, Right, Bottom) is an effective way to prevent overlap and ensure the boxes tessellate correctly.
Here is the snippet of my HTML:
.box-1,
.box-2,
.box-3,
.box-4 {
display: flex;
border: solid black;
justify-content: center;
align-items: center;
}
.box-1 {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
border: solid rgb(72, 255, 72);
border-width: 3px;
}
...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content "text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="box-1">
box1
<div class="box-2">
box2
<div class="box-3">
box3
<div class="box-4">
box4
</div>
</div>
</div>
</div>
</body>
</html>Can anyone shed some light on why each of my boxes is offset in the top value? Could it be related to margins?
Take a look at the image below for reference: