[css] Layout - inline, inline-block, block이란

1. inline

주로 텍스트를 입력할 때 사용하는 형태로 content 만큼 영역만큼 차지합니다

width와 height 값을 설정할 수 없다

요소 : <a>, <i>, <span>, <img>, <strong>, <input>, <sub>, <br>, <textarea>, <label>, <button>, <cite>...

 

2. inline-block

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

inline과 달리 element에 width와 height 값을 설정할 수 있고, 설정하지 않은 경우 content 만큼 영역을 차지합니다 

 

3. block

한 영역을 차지하는 박스 형태이다

width, height, padding, margin 값을 설정할 수 있다

요소 : <div>, <header>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <ul>, <p>, <ol>, <video> ...

 

Resources

https://www.w3schools.com/css/css_inline-block.asp

https://seungwoohong.tistory.com/23