CSS_속성(Inline, block, Inline-block)

▶block

 

한 영역을 차지하는 박스형태를 자기는 성질이다. 그렇기에 기본적으로 block은 width값이 100%가 되며 block 다음 block을 넣을 경우 쌓이는 형태로 출력되게된다.

 

-. block은 height와 width값을 지정할 수 있다. 

-. block은 margin과 padding을 지정할 수 있다. 

 

<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

 

▶inline

 

주로 텍스트를 주입할 때 사용되며 width와 height값은 컨텐츠 영역만큼 자동으로 잡히게된다. inline끼리 추가로 입력을 하면 한 줄로 선처럼 쌓이게된다.

 

-. width와 height를 명시할 수 없다(input, textarea, select, img 제외).

-. margin은 위아래엔 적용되지 않는다.

-. padding 좌우는 공간과 시각적인 부분이 모두 적용되지만, 위아래는 시각적으로만 추가될 뿐 공간을 차지하지는않는다.

 

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, 

<tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>

 

▶inline-block

 

inline과 block의 특징을 모두 가진 요소이다.

 

-. 줄바꿈이 이루어지지않는다.

-. block 처럼 width와 height를 지정할 수 있다. 

-. width 와 height를 지정하지않을경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

-. 가로배치를 할 때 주로 사용된다.

 

 

*Reference

https://seungwoohong.tistory.com/23