css-6: 인라인과 블록요소

인라인과 블록요소

inline	block	inline-block
기본 너비	컨텐츠만큼	부모의 너비만큼	컨텐츠만큼
width, height 속성	무시	적용	적용
가로공간 차지	공유	독점	공유
margin 속성 ( 바깥쪽 여백 )	가로만 적용	모두 적용 ( 상하 상쇄 )	모두 적용
padding 속성 ( 안쪽 여백 )	가로만 적용, 세로는 배경색만	모두 적용	모두 적용

👉 인라인 요소들 목록 보기

👉 블록 요소들 목록 보기

* html

<ul>
  <li>홈</li>
  <li>회사소개</li>
  <li>제품소개</li>
  <li>고객센터</li>
  <li>커뮤니티</li>
</ul>

* css

ul li {
  display: inline;
}

ul > li {
  margin-right: 2em;
}