Search code examples
htmlcssblockdisplay

Display:inline-block is not running properly

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;
}

enter image description here

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.

Solution

  • 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

    enter image description 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>