What is the problem with the display : inline-block in my code [duplicate]-CodePudding

This question already has answers here:

CodePudding user response：

You just need to add vertical-align: top; on your .box element.

Here's the example, with the code you had provided:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 200px;
  height: 390px;
  color: white;
  padding: 25px;
  vertical-align: top; // here's the magic
}

.box1 {
  background: turquoise;
}

.box2 {
  background: #f5c402;
}

.box3 {
  background: lightsalmon;
}

.box4 {
  background: teal;
}

  <div class="box1 box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
  </div>
  <div class="box2 box">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
  </div>
  <div class="box3 box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
    possimus quidem consectetur, laborum quos sed?
  </div>
  <div class="box4 box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
    possimus quidem consectetur, laborum quos sed?
  </div>

For a better approach, I suggest you to wrap all the .box elements on a parent element .boxes-container and use display: flex and flex-wrap: wrap on this new parent element.

Here's the solution for the second case:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.boxes_container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 200px;
  height: 390px;
  color: white;
  padding: 25px;
}

.box1 {
  background: turquoise;
}

.box2 {
  background: #f5c402;
}

.box3 {
  background: lightsalmon;
}

.box4 {
  background: teal;
}

<div class="boxes_container">
  <div class="box1 box">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum sapiente, autem numquam modi dolorem perferendis iure quaerat corrupti nobis!
  </div>
  <div class="box2 box">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias incidunt tempore minima ut asperiores eveniet error eligendi fuga deserunt numquam, voluptas impedit qui repellendus quam architecto, blanditiis unde explicabo quasi.
  </div>
  <div class="box3 box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
    possimus quidem consectetur, laborum quos sed?
  </div>
  <div class="box4 box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque dolorum nobis hic? Illum omnis sequi molestiae dignissimos voluptates voluptatibus dolores quaerat non aliquam quis natus maiores quod aut aperiam labore doloremque deserunt laboriosam cupiditate
    possimus quidem consectetur, laborum quos sed?
  </div>
</div>

CodePudding user response：

You can use inline-flex instead of inline-block. It works.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.box {
  display: inline-flex;
  width: 200px;
  height: 390px;
  color: white;
  padding: 25px;
}

.box1 {
  background: turquoise;
}

.box2 {
  background: #f5c402;
}

.box3 {
  background: lightsalmon;
}

.box4 {
  background: teal;
}

CodePudding user response：

Along with display:inline-block you may like to use vertical-align property. In your case:

.box {
    display: inline-block;
}

CodePudding user response：

Try to add float:left; to .box

Page link：https//www.codepudding.com/net/139354.html

Prev:Override mat-list-text

Next:How do I align my boxes staggered underneath other boxes?