Display:inline-block is not running properly [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 17 days ago.
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.

Answer 1

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>

Answer 2

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