.png)
Inline
/* 기본적으로 inline으로 설정된 태그들은
따로 설정해줄 필요가 없다. */
selector {
display: inline;
}- 포함하고 있는 내용만큼만 너비를 차지한다.
- 줄바꿈이 일어나지 않는다.
- 너비와 높이를 가질 수 없다(height, width)
- 마진과 패딩이 가로 방향으로만 적용된다.
<a>,<span>,<em>,<strong>
<a>태그에 margin과 padding을 적용한 예제, 패딩이 적용이 되었지만 block요소를 침범해버렸다.
block
/* 기본적으로 block으로 설정된 태그들은
따로 설정해줄 필요가 없다. */
selector {
display: block;
}- 100%의 너비를 가진다.
- 너비와 높이를 가질 수 있다.
- 요소들이 수직방향으로 하나씩 쌓인다.
<body>,<div>,<h1>~<h6>,<nav>,<p>,<ul>,<ol>,<li>
inline-block
selector {
display: inline-block;
}- inline같은 외관을 가지고 있지만 block같은 특징을 가지고 있다.
- 가지고 있는 컨텐츠의 크기만큼만 공간을 차지한다.(like inline)
- 줄바꿈이 일어나지 않는다. (like inline)
- 너비와 높이를 가질 수 있다. (like block)
- 패딩과 마진을 적용할 수 있다. (like block)
