Error Not able to find why this is Happening?

anandprakash1091971 · September 7, 2020, 5:03am

here i have make 4 box using div
but they are arranging up and down why??
why they are not at same leve??

when i make text of each box same then they come up in same line
why this is happening?

link of html and css file

CodingJoshi/DoubtsWebD/blob/master/Position.css

.box{
    height: 100px;
    width: 100px;
    margin: 20px;
    padding: 10px;
    display: inline-block;
    border: black dashed 2px;
    color: white;
}
.one{
    background-color: black;
}
.two{
    background-color: red;
}
.three{
    background-color: orange;
}
.four{
    background-color: blue;

This file has been truncated. show original

github.com

CodingJoshi/DoubtsWebD/blob/master/position.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position</title>
    <link rel="stylesheet" href="Position.css">
</head>
<body>
    <div class="box one">relative position</div>
    <div class="box two">gfsdgfd</div>
    <div class="box three">relative positsdfgsdfgsdfg sdfgion</div>
    <div class="box four">relative to original position</div>
    <div class="box five">relative </div>
    <!-- <div class="box six"></div> -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni incidunt dolorem porro nesciunt nobis minima, ipsa atque. Reiciendis nesciunt voluptatibus sequi magnam alias, deserunt facere quia quod eaque. Dicta, quis?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni incidunt dolorem porro nesciunt nobis minima, ipsa atque. Reiciendis nesciunt voluptatibus sequi magnam alias, deserunt facere quia quod eaque. Dicta, quis?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni incidunt dolorem porro nesciunt nobis minima, ipsa atque. Reiciendis nesciunt voluptatibus sequi magnam alias, deserunt facere quia quod eaque. Dicta, quis?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni incidunt dolorem porro nesciunt nobis minima, ipsa atque. Reiciendis nesciunt voluptatibus sequi magnam alias, deserunt facere quia quod eaque. Dicta, quis?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni incidunt dolorem porro nesciunt nobis minima, ipsa atque. Reiciendis nesciunt voluptatibus sequi magnam alias, deserunt facere quia quod eaque. Dicta, quis?</p>

This file has been truncated. show original

Darsh-Pratap-325457197922299 · September 7, 2020, 1:49pm

@anandprakash1091971 the problem is there because of the inline-block, that’s just how it works. As you can see in the text inside the divs, there are some line breaks (space characters) present, and inline-block shifts the div positioning regarding those spaces. For them to appear, at same height, you can do 2 things

Either you float instead of display: inline-block
Or put vertical-align: top in your box class
This should solve your problem

Darsh-Pratap-325457197922299 · September 15, 2020, 4:10am

I hope I’ve cleared your doubt. I ask you to please rate your experience here
Your feedback is very important. It helps us improve our platform and hence provide you
the learning experience you deserve.

On the off chance, you still have some questions or not find the answers satisfactory, you may reopen
the doubt.