TIL 12 HTML/CSS - inline, block, inline-block

inline

display 속성이 inline으로 지정된 엘리먼트는 전 후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.

대표적으로 <span>, <a>, <em>태그 등이 있다.

여러 개의 inline 엘리먼트들을 마크업하면 줄바꿈 없이 순서대로 한 줄에 보이게 된다.

inline 엘리먼트를 사용할 때 주의할 점은 width와 height 속성을 지정해도 무시된다는 것이다.

그리고 margin과 padding속성은 좌우 간격만 반영되고 상하 간격은 반영되지 않는다.

//test.html
<a>I'm A</a>
<span>I'm SPAN</span>
<em>I'm EM</em>

//test.css
span {
	background: yellow;
	width: 200px;
	height: 50px;
	margin: 20px;
	padding: 10px;
}

a {
	background: red;
}

em {
	background: blue;
}

block

display속성이 block로 지정 된 엘리먼트들은 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지한다. 대표적으로 <div>, <p>, <h1>태그 등이 있다.

block엘리먼트는 inline과 달리 width, height, margin, padding 속성이 모두 반영된다.

//test.html
<h1>I'm H1</h1>
<div>I'm DIV</div>
<p>I'm P</p>

//test.css
div {
	background: yellow;
	width: 200px;
	height: 50px;
	margin: 20px;
	padding: 10px;
}

h1 {
	background: red;
}

p {
	background: blue;
}

inline-block

display속성이 inline-block로 지정된 엘리먼트는 inline엘리먼트처럼 전후 줄바꿈이 없이 한 줄에 나란히 배치된다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해진다.

대표적으로 <button>, <select> 태그 등이 있다.

inline-block엘리먼트는 사용하기 위해서는 해당 엘리먼트의 스타일을 display: inline-block로 지정해줘야 한다.

//test.html
<a>I'm a</a>
<em>I'm em</em>
<span>I'm span </span>

//test.css
em {
	display: inline-block;
	background: yellow;
	width: 200px;
	height: 50px;
	margin: 20px;
}

a {
	display: inline-block;
	background: red;
	height: 75px;
}

span {
	display: inline-block;
	background: blue;
	width: 100px;
	height: 100px;
}