블럭 요소와 인라인 요소의 차이점에 대해 알아보자.
블럭 요소는 다음과 같은 세 가지의 특징을 가진다.
<div></div>
<div></div>
div {
width: 10px;
height: 10px;
background-color: #006bc0;
margin: 5px;
}
div
가 두 줄에 걸쳐 나타나는 모습이다.
<div></div>
<div></div>
div {
width: 10px;
height: 10px;
background-color: #006bc0;
margin: 5px;
padding: 10px;/* 부풀리기 */
}
padding
전
padding
후
인라인 요소는 다음과 같은 세 가지의 특징을 가진다.
<span>1</span>
<span>2</span>
<span>3</span>
span {
padding: 10px;
}
<span>1</span>
<span>22</span>
<span>333</span>
span {
width: 10px;
height: 10px;
background-color: pink;
padding: 10px;
}
크기를 얼마나 지정하든지 내용물의 크기만큼 가로 세로가 지정되는 모습이다.