Stop div from going down when adding text

Question

I am trying to place text inside a square div. The only problem is that it shifts the div that text to a large extent. Does anyone know how I can return a div to its original position?

Here is the html:

<div id="squarecontainer"> <div id="square1"> <p>Easy to Manage</p> </div> <div id="square2"> </div> <div id="square3"> </div> </div> 

Here is the css:

 #squarecontainer{ text-align: center; } #square1{ display: inline-block; position: relative; margin-right: 100px; height: 310px; width: 310px; margin-top: 72px; background-color: #fff; } #square2{ display: inline-block; position: relative; height: 310px; width: 310px; margin-top: 72px; background-color: #fff; } #square3{ display: inline-block; position: relative; margin-left: 100px; height: 310px; width: 310px; margin-top: 72px; background-color: #fff; } 

#square1 is a div that shifts very down when I added the text “Easy to Control”.

Answer 1

I have found a solution. By adding vertical-align: top; , he moved the div back. I don’t know why it worked, but it happened.

Answer 2

Going to the answer zachstarnes .

The problem is that the default vertical-align set to baseline .

Align the baseline of the element with the base element of the parent element. This is the default value.

Since other divs are empty, their baseline is by default at the bottom of the div. Please note: if you fill out the text, they will all begin to move down until they all have content.

Depending on how you want the divs to align with each other, change the vertical-align property to another baseline .

---

Answer 3

Give the position to the p tag. The problem will be solved.

 #square1 p { position:absolute; width: 100%; text-align: center; } 

Working script

Answer 4

use word-wrap property

 div[id^="square"]{ word-wrap: break-word; } 

You can specify the value normal or break-word using the word-wrap property. normal means that the text extends the borders of the window. break-word means that the text will be wrapped to the next line.

Answer 5

Using this solves the problem:

 #square1 { overflow: auto; } 

Answer 6

The reason why this happens is for inline-block elements:

At the inline (inline-block) level, you must specify the vertical alignment of the text. Thus, in essence, without setting the vertical alignment, the content is placed in the default location, which is the baseline. This is why your text compensates for your layout.