CSS - inline, block, inline-block 요소

Display 속성 값 중 가장 기본적인 inline, block, inline-block 요소에 대해서 알아보자!

---

1. Inline element

• 인라인 요소는 기본적으로 줄바꿈 없이 순서대로 배치되며 컨텐츠 크기만큼 영역을 사용하는 요소이다. 그렇기 때문에 width와 height를 이용한 크기를 가질 수 없다. 텍스트와 같다고 이해하면 쉬울 것이다.
• 상하 마진 적용 불가능! but 좌우 마진 적용 가능 (패딩은 상하좌우 모두 가능!!)

<인라인 요소 종류>

<a> / <img> / <textarea> / <span> / <b> / <vedio> / <button> / <input> / <label> / <map> / <object> / <select> / <script>

 

2. Block element

• 블록 요소는 가로폭 전체의 넓이를 가지는 직사각형 형태의 요소이다. 따라서 한줄을 차지하며 블록 요소 뒤에 또 다른 요소들이 오게 되면 밑에 줄에 입력이 되게 된다.
• 블록 요소는 width와 height를 사용하여 크기를 지정할 수 있는 특징이 있다.
• 상하좌우 마진과 패팅 적용가능!!

<블록요소 종류>

<div> / <p> / <h1~h6> / <header> / <nav> / <footer> / <section> / <table> / <aside> / <caption> / <blockquote> / <li> / <ol, ul>

 

3. Inline-block element

• 인라인-블록 요소는 인라인과 동일하게 한줄에 줄바꿈 없이 요소들이 배치된다. 하지만 width와 height를 이용하여 크기를 줄 수 없었던 인라인 요소와 다르게 크기를 지정할 수 있다. 또한 상하좌우 마진과 패딩이 적용이 가능하다는 점에서 인라인 요소와의 차이점이다.

<인라인-블록요소 종류>

<img> / <input> / <button>

 

◈ 요소별 세팅값 변경하기!

• 인라인 요소를 블록 요소로 블록 요소를 인라인 요소로 변경이 가능하다! 

ex {
    display: inline; // inline 요소로 변경
    display: block; // block 요소로 변경
    display: inline-block; // inline-block 요소로 변경
}

• 다음과 같은 방법으로 쉽게 세팅값을 변경할 수 있다.