입문자를 위한 기초 css (7) - 박스모델 및 margin padding

7. 박스모델 2편, margin padding 다루기

여백 :

상하좌우 네 개의 면에 존재하는 영역
=> 작성자는 각 면에 개별적으로 두께를 정의할 수 있다.

두 가지 방법

• 하위 속성 정의하기
• 여러 값을 한 번에 정의하기

상하좌우 여백을 정의할 수 있는 개별 속성들

• padding-top
• padding-left
• padding-right
• padding-bottom

=> margin에도 동일한 접미사를 붙여 정의

블록 레벨 요소를 생성하여 기본적은 옵션 값을 적용한 결과이다.

블록 레벨 요소에 padding값들을 지정한 결과이다.

블록 레벨 요소에 padding값과 margin값을 지정한 결과이다.

여러 값을 한 번에 정의하기

• padding과 margin은 네 면의 여백에 대한 단축속성이다.

span{
	display: inline-block;
    width: 100px; height: 100px;
    margin: 10px 20px 30px 40px;
}

margin 옵션 값은 순서대로 상 우 하 좌 (시계방향) 이다.

margin에 하나의 값만 지정한다면 상하좌우 모두 동일한 값이 해당된다.

margin에 두개의 값을 지정한다면 첫번째 값은 상하, 두번째 값은 좌우에 해당된다.

margin에 3개의 값을 지정한다면 첫번째 값은 상, 두번째 값은 좌우, 세번째 값은 하에 해당된다.

4개의 값을 지정해서 상하좌우 각각에 해당하는 값을 지정한 결과이다.