[CSS] display의 속성

display 의 속성에는 inline, inline-block, block, none 네 가지의 종류가 있다.

 

1) inline : 너비를 최소한으로 줄여준다.(공간을 최소화) 

             한 줄에 여러개가 나오게 해준다.

             부모에게 text-align을 쓰면 정렬할 수 있다.

             element를 글자화한다.

             *하지만 inline을 쓰면 padding, margin, width, height가 적용되지 않는다.

---

2) inline-block : 기본적으로 inline과 속성이 유사하다.

                    (공간을 최소화, 한 줄에 여러개가 나옴, element를 글자화한다. )

                     inline-block을 쓰면 padding, margin, width, height가 적용된다.

                   

---

3) block : block은 말 그대로 element를 블럭화 시켜준다.

            display:block 을 적용하면 그 element는 한 줄을 통째로 혼자 사용한다.

            영역이 최대한으로 넓어진다.

            자기 스스로 margin-left, margin-right를 사용하여 정렬한다.

           

---

4) none : display:none은 말 그대로 화면에서 보이지 않게된다.

            (none을 줬다가 나중에 다른 display 속성을 주면 나타나게 할 수 있다.)

 

---

** a, img, span은 display 기본 속성이 inline이다!