1

enter image description here

Let me visually demo the result first. (you can see this by expanding the code snippet to full page)

With the source HTML / CSS code below.

<!DOCTYPE html>
<html>
<head>
</head>
 <style>
.container{
        height: 400px;
        width: 400px;
        border: 2px solid black;
        display: inline-block;
        position: relative;
        
    }

    .box{
        height: 100px;
        width: 100px;
        border: 1px solid gray;
        display: inline-block;
    }
    .box1{
        height: 100px;
        width: 100px;
        border: 1px solid gray;
        position: absolute;
    }
    .box2{
        height: 100px;
        width: 100px;
        border: 1px solid gray;
        position: absolute;
        left: 100px;;

    }
    .box3{
        height: 100px;
        width: 100px;
        border: 1px solid gray;
        position: absolute;
        left:200px;
    }
    .box4{
        height: 100px;
        width: 100px;
        border: 1px solid gray;
        position: relative;
        left:300px;
    }
</style>
<body>
    <div class="container">
        <div class="box1">position absolute</div>
        <div class="box2">position absolute</div>
        <div class="box3">position absolute</div>
        <div class="box4">position absolute</div>
    </div>
    <div class="container">
        <div class="box">display: inline-block, position: static</div>
        <div class="box">display: inline-block, position: static</div>
        <div class="box">display: inline-block, position: static</div>
        <div class="box">display: inline-block, position: static</div>
    </div>
    
    
</body>

</html>

I am wondering why there is a space in the upper left side of this layout.

Originally, I thought the two large box(outer square) should alight the height because both of them are display:inline-block.

Really wondering how the CSS calculate and decided to show this result under the hood.

Thanks in advance!

I_love_vegetables
  • 1,575
  • 5
  • 12
  • 26
StevenR
  • 702
  • 1
  • 8
  • 17
  • 2
    btw you dont have to put same properties to `box1`, `box2`, `box3`, and `box4` manually on every single element like that, instead of targeting one by one like `.box1{` `.box2{` etc... you can use commas like `.box1, .box2, .box3, .box4{` and assign the `height` `width` and `border` properties all at once to all the boxes – I_love_vegetables Jul 10 '21 at 10:07
  • vertical-align:top – Temani Afif Jul 10 '21 at 10:12
  • I would wrap the containers in an element with a css-property of `display: flex;` – johannes Jul 10 '21 at 10:16
  • I know vertical-alight can solve the problem, but I am wonder why the baseline of the two large inline-block elements are different (due to the child DOM) – StevenR Jul 10 '21 at 10:19
  • The content of box4 says "position:absolute", but box4 is actually position:relative. That makes it unclear what your intent is. – Alohci Jul 10 '21 at 10:37
  • lol it's a just a demo page to help me understand how their actual theory between each other. – StevenR Jul 10 '21 at 11:13
  • I just figured out the reason. The actual reason is because the two display-inline block alight the baseline(which is the bottom-most underline) together. https://infoheap.com/css-inline-block-baseline-alignment/ Check this link for further information – StevenR Jul 10 '21 at 11:15

0 Answers0