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

• 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; 적용