CSS 기초

margin과 padding

margin

margin 속성은 요소의 바깥쪽 여백을 설정한다.

정의

• margin-top 속성은 요소의 위쪽 바깥쪽 여백을 설정
• margin-right 속성은 요소의 오른쪽 바깥쪽 여백을 설정
• margin-bottom 속성은 요소의 아래쪽 바깥쪽 여백을 설정
• margin-left 속성은 요소의 왼쪽 바깥쪽 여백을 설정
• margin: 10px 11px 12px 13px; : 위 : 10px, 오른쪽 : 11px, 아래 : 12px* 왼쪽 : 13px
• margin: 10px 11px 12px; : 위 : 10px, 왼쪽, 오른쪽 : 11px, 아래 : 12px
• margin: 10px 11px; : 위,아래 : 10px, 왼쪽, 오른쪽 : 11px
• margin: 10px; : 위,오른쪽,아래,왼쪽 : 10px
• margin: auto; : 기본값
• margin: 0 auto; : 가운데 정렬(블록구조에서 사용가능)

padding

padding 속성은 요소의 안쪽 여백을 설정한다.

정의

• padding-top 속성은 요소의 위쪽 안쪽 여백을 설정
• padding-right 속성은 요소의 오른쪽 안쪽 여백을 설정
• padding-bottom 속성은 요소의 아래쪽 안쪽 여백을 설정
• padding-left 속성은 요소의 왼쪽 안쪽 여백을 설정
• padding: 10px 11px 12px 13px; : 위 : 10px, 오른쪽 : 11px, 아래 : 12px* 왼쪽 : 13px
• padding: 10px 11px 12px; : 위 : 10px, 왼쪽, 오른쪽 : 11px, 아래 : 12px
• padding: 10px 11px; : 위,아래 : 10px, 왼쪽, 오른쪽 : 11px
• padding: 10px; : 위,오른쪽,아래,왼쪽 : 10px

Block 과 Inline

block은 한 영역을 차지하는 박스형태를 가지는 성질이다. 그렇기 때문에 block는 기본적으로 width값이 100%가 되며 라인이 새로 추가된다.
inline은 주로 텍스트를 주입 할 때 사용되는 형태이다. 그렇기 때문에 block처럼 width값이 100%가 아닌 컨텐츠 영역만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않는다.

정리

• block은 height와 width값을 지정 할 수 있다.
• block은 margin와 padding을 지정 할 수 있다.
• inline은 widdth와 height를 명시 할 수 없다.
• inline에서 margin은 위아래엔 적용 되지 않는다.
• inline에서 padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지 않는다.

Block 과 Inline 속성 태그 표기시 주의할 점

Block은 Inline을 포괄하는 더 큰 개념이다. 따라서 HTML을 마크업 할 때는 Inline 속성의 태그 안에 Block 속성 태그를 넣으면 문법 오류가 된다. inline이 block보다 작은 개념임

inline-block

inline-block은 inline처럼 한줄에 배치되지만 inline에서 불가능하던 width와 height속성지정 및 margin과 padding속성의 상하 간격 지정이 가능해진다.