ehsan ehsan - 2 months ago 11
CSS Question

chidren div move down when i type text into

This is my code :



#wrapper {
margin: 0 auto;
display: block;
width: 1200px;
border: 1px solid red;
}

div {
width: 150px;
height: 200px;
border: 1px solid red;
display: inline-block;
margin-right: 80px;
}

<div id="wrapper">
<div>this is test. this is test.</div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>




Answer

An element displayed as inline-block align to its parent baseline, hence it moves down when it has content.

Giving them a vertical-align: top value will fix that.

Another option is to drop the inline block and give the wrapper display: flex

#wrapper {
	margin: 0 auto;
	display: flex;
	width: 1200px;
	border: 1px solid red;
}

div {
	width: 150px;
	height: 200px;
	border: 1px solid red;
	margin-right: 80px;
}
<div id="wrapper">
 <div>this is test. this is test.</div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>