Div moves with all text -Css

Question

I have the following question. Why is my div moving down?

I understand that it can be fixed with:

vertical-align: top;

but why does the div and all the text move?

div{

    width: 200px;
    height: 200px;
    display: inline-block;
    border: 1px solid black;
    
}

<body>

    <div>
        <p>Inventore delectus fugit ut. Ipsam adipisci est consectetur velit ab. Magni recusandae molestias, dolorum asperiores dignissimos nemo. ipsum dolor sit amet consectetur adipisicing elit. Nihil commodi sint ab iae! Temporibuslit.
        Nihil commodi sint a</p>
         

    </div>


    <div>
        <p>Lorempsa quas qub ipsa quas quae! Temporibus athtrhliquid hic assumenda deserunlit. Nihil commodi sint</p>
        
        
    </div>

</body>

enter image description here

score 0 · Accepted Answer · answered Feb 20 '21 at 02:27

0

Using inline-block, your div will position themselves so the last line of text inside each one of theme is on the same line. Use inline-flex for long texts.

answered Feb 20 '21 at 02:27

Scurra Magna

52
3

Div moves with all text -Css

1 Answers1