[CSS] display: inline, inline-block, block

1. display: inline에 대해서

대표적인 태그로는 <a>, <span>, <img>가 있으며,

본인의 text나 content 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는 속성

1.  width 적용 불가
2. height 적용 불가
3. margin 적용 불가
4. padding-top/bottom 적용 불가
5. line-height 유연 사용 불가

<a>	<i>	<span>	<abbr>	<img>	<strong>	<b>	<input>	<sub>	<br>
<code>	<em>	<small>	<cite>	<map>	<textarea>	<label>	<sup>	<q>	<button>

 

 

2. display: block에 대해서

 대표적인 태그로는 <div>, <table>, <ul>가 있으며,

 한 라인을 점유하고, 다음 태그는 줄바꿈이 적용되는 특성

<address>	<article	<aside>	<block quote>	<canvas>	<dd>	<div>	<dl>	<header>	<form>
<h1>	<h2>	<h3>	<h4>	<h5>	<table>	<pre>	<ul>	<p>	<ol>

 

3. display: inline-block에 대해서

 inline 속성의 특징과 block 속성의 특징이 혼합

 그 이유는. inline 속성과 동일하나(줄바꿈을 하지 않고, 한 라인에 작성 가능)  inline 속성에서 할수 없었던 width/height 변경 및 line-height 적용가능한 특징이 있다.

1.  width 적용 가능
2. height 적용 가능
3. margin 적용 가능
4. padding-top/bottom 적용 가능
5. line-height 유연 사용 가능

 

 

See the Pen Untitled by hbkuk (@hbkuk) on CodePen.