IT탐험

display속성 block요소와 inline요소의 차이 본문

공부내용정리/CSS

display속성 block요소와 inline요소의 차이

watercase 2021. 11. 28. 12:24
  • display 속성인 block요소와 inline요소에는 세 가지 차이가 있음
    1. 줄 바꿈 현상 유무
    2. width와 height 속성 적용 유무
    3. margin-top, margin-bottom, padding-top, padding-bottom 속성 적용 유무
  block inline
줄 바꿈 현상 유무 O X
width와 height 속성 적용 유무 O X
margin-top or bottom, padding-top or bottom 적용 유무 O X

 

  • block 요소와 inline 요소의 종류
    • block 요소 - <h1>~<h6>, <p>, <header>, <section>, <main>, <aside>, <footer>, <div>
    • inline 요소 - <span>, <a>, <input>

 

  • block 요소를 inline 요소로 변경할 수 있고, 반대의 경우도 가능함
    • display : block or inline; 적용

 

  • 줄 바꿈 현상은 일어나지 않지만 width, height, margin, padding 속성을 적용하고 싶을때
    • display : inline-block; 적용

'공부내용정리 > CSS' 카테고리의 다른 글

transform, transition, animation  (0) 2021.12.13
z-index, float, clear  (0) 2021.12.13
position 속성으로 HTML 태그에 차원 부여  (0) 2021.11.28
마진 병합 현상 (collapsing margins)  (0) 2021.11.28
Comments