inline & block & inline-block를 알아보자
block 요소 : <div>, <aside>, <h1>, <header>, <p>, <ul>
등등
inline요소: <a>, <i>, <img>, ,<strong>, <input>
등등
block은 한 영역을 차지하는 박스형태를 가지는 성질이다. 그렇기 때문에 block은 width값이 100%가 된다. 그리고 block요소 다음에 붙는 태그는 줄바꿈이 되어서 나타난다.
실제 예를 보자
<style>
.hello1{
height: 100px;
background-color: blueviolet;
}
.hello2{
height: 100px;
background-color:aqua;
}
</style>
<div class="hello1">
</div>
<div class="hello2">
</div>
inline은 주로 텍스트를 주입 할 대 사용되는 형태이다.
<style>
span{
background-color: tomato;
}
</style>
<span>hello!</span>
<span>hello!</span>
<span>hello!</span>
<span>hello!</span>
위의 block요소와 다르게 줄바꿈도 안되고 한줄에 표현되고 넓이와 높이는 글씨크기만큼 할당된다.
span에 padding-top:30px;을 주었지만 공간만 차지 하고 위에 div태그와 공간이 생기지 않는다.
inline-block은 말그대로 혼종이다.