한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
CSS : 여백 속성
CSS에서 여백(margin)과 내부여백(padding),은 요소의 레이아웃을 조절하는 데 사용되는 속성입니다.
Margin
Margin: 요소와 주변 요소 사이의 공간을 지정합니다. margin 속성은 top, right, bottom, left 속성을 사용하여 각 방향별로 여백을 지정할 수 있습니다.
h1 {margin: 10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */
h2 {margin: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */
h3 {margin: 10px 5px;} /* top & bottom-10px, right & left-5px */
h4 {margin: 10px;} /* all four margins are 10px */margin의 속성 값은 아래와 같습니다.
- auto : 브라우저가 마진을 계산한다.
- length(길이) : 마진을 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.기본값은 0px이다.
- %(퍼센트) : 마진을 퍼센트로 폭을 적용한다.
- inherit : 부모 요소로부터 값을 상속 받는다.
Padding
Padding: 요소 내부와 테두리 사이의 공간을 지정합니다. padding 속성은 마찬가지로 top, right, bottom, left 속성을 사용하여 각 방향별로 여백을 지정할 수 있습니다.
h1 {padding:10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */
h2 {padding: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */
h3 {padding: 10px 5px;} /* top & bottom-10px, right & left-5px */
h4 {padding: 10px;} /* all four paddings are 10px */padding의 속성 값은 아래와 같습니다.
- length(길이) : 패딩을 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc )
- 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다. 기본값은 0px이다.
- %(퍼센트) : 패딩을 퍼센트로 폭을 적용한다.
- inherit : 부모 요소로부터 값을 상속 받는다.