display속성(block, inline, inine-block)

display

display속성은 요소의 레이아웃을 설정할 때 활용되는 속성 값이다.

• block
• inline
• inline-block

---

block

• 거의 모든 html태그가 default로 갖고 있는 display 속성 값이다.
• <header>, <footer>, <p>, <li>, <table>, <div>, <h1> etc
• 자기 자신을 기준으로 전후로 줄 바꿈이 적용된다. (다른 요소들과 한 줄에 배치될 수 없다.)

 

See the Pen block by JAEWOOKJUNG (@JAEWOOKJUNG) on CodePen.

 

inline

• <span>, <a>, <img>등의 태그가 default로 갖고 있는 속성이다.
• 자기 자신 옆에 다른 요소를 나란히 늘여 놓을 수 있다.
• 자기 자신의 content요소만큼만의 공간을 차지하고 width와 hight 속성을 지정하더라도 무시한다.
• margin과 padding은 상하 간격은 무시하고 좌우만 적용이 가능하다.

 

See the Pen GRNmrYW by JAEWOOKJUNG (@JAEWOOKJUNG) on CodePen.

 

inline-block

• 기본적으로는 inline 값과 같이 다른 요소를 한 줄에 늘여놓을 수 있다.
• 요소에 대한 height와 width 값을 지정할 수 있다.
• 상하좌우 모두 margin과 padding값을 지정할 수 있다.

 

See the Pen inine-block by JAEWOOKJUNG (@JAEWOOKJUNG) on CodePen.

 

---

참고

poiemaweb.com/css3-display

CSS3 Display | PoiemaWeb