[ITWILL : WEB]마진과 패딩, 인라인과 블록 차이

💡 핵심 요약 (TL;DR)

'마진과 패딩, 인라인과 블록 차이'에서 다루는 각 기술의 핵심 개념과 동작 방식의 차이점을 분석한 내용이다. 동작 원리와 장단점을 비교 파악하여 프로젝트 개발 상황에 적합한 방식을 선택할 수 있다.

ITWILL학원 : 10강 WEB(HTML, CSS) BY 김영희

1. margin 마진

• 테두리기준 바깥여백
• margin왼쪽값과 오른쪽값이 서로 같으면 요소는 항상 중앙에 온다.
  • 따라서 margin의 좌우값을 auto를 지정
• margin : 위 오른 아래 왼

2. padding 패딩

• 테두기리준 안쪽여백
• padding : 위 오른 아래 왼

3. margin과 padding 차이

4. inline과 block 차이

• 참고링크 : HTML 정의태그 dl, dt, dd 태그, code 태그, block VS inline VS inline-block

• 인라인요소(한줄에 나란히 오는 요소, 줄바꿈이 없는 요소) :

  • 상하 margin과 height와 width 아예 적용 안됨
  • 좌우 margin가능
  • img태그와 input태그는 예외

#TILHTML&CSSITWILL(JAVA)