inline
은display
속성이다. inline 요소는 전후 줄바뀜 없이 다른 요소와 같이 한줄로 나란히 배치된다.
🔥 특징
a
span
em
img
input
butten
br
label
등 있다.display: inline;
으로 지정하면 inline적용이 된다.예)
<style>
a{
display: inline;
background-color: plum;
}
</style>
</head>
<body>
<a>inline1</a>
<a>inline1</a>
<a>inline1</a>
<span
</body>
결과 ▼
inline-block
은 inline 요소처럼 전 후 줄바꿈 없이 한줄에 다른요소들까지 나란히 배치된다.
하지만 inline과 다르게 inline-block은 width와 height 그리고 margin, padding 의 속성들이 가능해진다는 차이점이 있다.
🔥 특징
button
input
select
등 있다.display: inline-block;
로 지정해줘야한다.예)
<style>
a{
display: inline-block;
width: 100px;
height: 50px;
margin: 20px;
padding: 10px;
background-color: plum;
}
</style>
</head>
<body>
<a>inline1</a>
<a>inline1</a>
<a>inline1</a>
<span
</body>
결과 ▼
대부분 html element 는 block이다.
한줄에 나열되지 않고 그 자체로 한줄이 되는 요소이다.
🔥 특징
block
태그들은header
footer
p
li
table
div
h1
div
등 block 요소이다.예)
<style>
div{
margin: 20px;
padding: 10px;
background-color: plum;
}
</style>
</head>
<body>
<div>block</div>
<div>block</div>
<div>block</div>
</body>
▼ 결과