Display:inline-block is not running properly - CSS

DoeunChoi
February 3, 2023
244 views
0 votes
2 Answers

I want to arrange three pink boxes in 1 row.
However, applying display:inline-block creates a space on top.
What’s the problem?

—————HTML—————-

<div class="hello">
  <h1>이건 첫째</h1>
</div>
<div class="hello">
  <h2>이건 둘째</h2>
  <input type="text">
</div>
<div class="helloCss">
  <h2>이건 셋째</h2>
  <ul>
    <li>Hello</li>
    <li>Css</li>
    <li>World!</li>
  </ul>
</div>
<div class="helloJava">
  <h2>이건 넷째</h2>
  <ol>
    <li>Hello</li>
    <li>Java</li>
    <li>World!</li>
  </ol>
</div>

—————SCSS—————-

$g:rgb(115, 115, 115);


@mixin box($color:pink){
    color:$g;
    background-color:$color;
    width:200px;
    height:300px;
    border:2px solid $g;
}

.hello{
    display:inline-block;
    input{
        margin:{
            left:10px;
            top:10px;
        }
    }
    @include box();
    h1{
        background-color:rgb(238, 206, 219);
    }
    &Java{
        @include box();
        background-color:rgb(175, 202, 255);
    }
}

.helloCss{
    @extend .hello;
}

margin 0, padding 0, wrap in one div, change h1 and h2 to span
Even if I raise the mouse from the developer tool, the area does not appear.

Answers

Because the elements are classed as inline the browser vertically aligns the text baseline to adjacent elements by default. If you draw a line under the bottom row of text you’ll see they’re all positioned next to each other.

More info from MDN here

The easiest way to fix this is the add vertical-align: top or similar to your css as follows:

.hello,
.helloCss {
  display: inline-block;
  
  vertical-align: top; /* added this */
  
  color: #737373;
  background-color: pink;
  width: 200px;
  height: 300px;
  border: 2px solid #737373;
}

.hello input,
.helloCss input {
  margin-left: 10px;
  margin-top: 10px;
}

.hello h1,
.helloCss h1 {
  background-color: #eecedb;
}

.helloJava {
  color: #737373;
  background-color: pink;
  width: 200px;
  height: 300px;
  border: 2px solid #737373;
  background-color: #afcaff;
}

<div class="hello">
  <h1>이건 첫째</h1>
</div>
<div class="hello">
  <h2>이건 둘째</h2>
  <input type="text">
</div>
<div class="helloCss">
  <h2>이건 셋째</h2>
  <ul>
    <li>Hello</li>
    <li>Css</li>
    <li>World!</li>
  </ul>
</div>
<div class="helloJava">
  <h2>이건 넷째</h2>
  <ol>
    <li>Hello</li>
    <li>Java</li>
    <li>World!</li>
  </ol>
</div>

As Timothy mentioned, it could be the default behavior of inline-block. However, if making a slight change to your HTML is an option, creating a parent div with flex is much easier for aligning divs.

html

<div class="flex">
  <div class="hello">
    <h1>이건 첫째</h1>
  </div>
  <div class="hello">
    <h2>이건 둘째</h2>
    <input type="text">
  </div>
  <div class="helloCss">
    <h2>이건 셋째</h2>
    <ul>
      <li>Hello</li>
      <li>Css</li>
      <li>World!</li>
    </ul>
  </div>
</div>
<div class="helloJava">
  <h2>이건 넷째</h2>
  <ol>
    <li>Hello</li>
    <li>Java</li>
    <li>World!</li>
  </ol>
</div>

CSCC

$g: rgb(115, 115, 115);

@mixin box($color: pink) {
  color: $g;
  background-color: $color;
  width: 200px;
  height: 300px;
  border: 2px solid $g;
}
.flex {
  display: flex;
  gap: 5px;
}
.hello {
  input {
    margin: {
      left: 10px;
      top: 10px;
    }
  }
  @include box();
  h1 {
    background-color: rgb(238, 206, 219);
  }
  &Java {
    @include box();
    background-color: rgb(175, 202, 255);
  }
}

.helloCss {
  @extend .hello;
}

Please signup or login to give your own answer.

Click here to cancel reply.

Display:inline-block is not running properly – CSS

Answers