0

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>

1
  • Add more data to the question to depict what exactly you want to achieve.
    – Deadpool
    Apr 13, 2017 at 8:48

3 Answers 3

2

always remember to define vertical-align for inline-block element.

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

div {
	width: 150px;
	height: 200px;
	border: 1px solid red;
	display: inline-block;
  vertical-align: top; /* add this always with inline-block */
	margin-right: 80px;
}
<div id="wrapper">
 <div>thisd ihd sofjdlkfj dlkfjdlkfj d</div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</div>

1

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>

0

Add vertical-align: top; to your div's css ;D

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.