Day 8

ming0·2022년 4월 6일
0
post-thumbnail

📖Today I Learned

✅인라인 요소 vs 블록레벨 요소

인라인 요소

  • 컨텐츠 박스만큼의 크기만 가지며 새 줄로 행을 바꾸지 않는다.
  • width와 height 속성을 사용할 수 없다.
  • padding과 border속성 사용가능, margin은 좌우 조절만 가능 -> 해당 속성들의 상하 값(top, bottom)들은 다른 요소를 밀어내지 않는다.

✔ 블록레벨 요소

  • 사용 가능한 공간을 양 옆으로 100% 사용, 사용하지 못하는 공간은 margin영역으로 채운다.
  • width와 height 속성 사용가능
  • padding, margin, border 속성 사용 가능 -> 해당 속성들이 다른 요소들을 밀어낸다.

<h1>block-level <strong>inline


✔ inline-block

  • line처럼 한 줄에 여러 요소가 존재
  • block처럼 width, height, margin, padding 등 모든 값 지정가능

✅마진 병합 현상 (마진 겹침 현상)

✔ 마진 겹침 현상 (margin collapsing) 이란?

  • 요소와 요소의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 margin 값이 적용되는 현상
  • 부모 요소와 자식 요소가 존재할 때, 자식 요소의 margin-top 혹은 margin-bottom값이 부모의 높이에 영향을 미치지 않는 현상

✔ 마진 겹침 현상 해결 방법
1. 부모 요소에 overflow 속성 값 적용
2. 부모 요소에 display:inline-block 값 적용
3. 부모 요소에 border값 적용

✅대체 CSS 박스 모델 (Alternative CSS Box Model)

✔ 표준 CSS 박스모델에서 요소의 전체적인 크기 = contents box + border box + padding box

✔ 대체 박스 모델의 콘텐츠 영역 크기 = width, height에서 padding 및 border를 뺀 값
box-sizing: border-box;

0개의 댓글