동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
CSS padding(여백)
CSS padding속성은 요소의 테두리 안쪽 여백을 정의합니다.
CSS를 사용하면 padding을 완벽하게 제어할 수 있습니다. 요소의 각면(위, 아래, 왼쪽, 오른쪽)에 대한 여백 설정을 위한 속성이 있습니다.
padding - 개별 속성
CSS에는 요소의 각 면에 대한 padding 지정을 위한 속성이 있습니다.
모든 padding속성은 다음 값을 가질 수 있습니다.
** 음수값은 허용되지 않습니다.
다음 예는 <div>요소의 네 면에 다른 padding을 설정합니다.
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
padding - 속기 속성
코드를 단축하기 위해 모든 padding속성을 하나의 속성에 지정할 수 있습니다.
padding속성은 다음과 같은 개별 padding속성에 대한 속기 속성입니다.
작동하는 방법은 다음과 같습니다.
padding속성의 값이 네 개인 경우
padding : 25px 50px 75px 100px;
div {
padding: 25px 50px 75px 100px;
}
padding속성값이 세 개인 경우
padding : 25px 50px 75px;
div {
padding: 25px 50px 75px;
}
padding속성값이 두 개인 경우
padding : 25px 50px;
div {
padding: 25px 50px;
}
padding속성값이 한 개인 경우
padding : 25px;
top and right and bottom and left-padding : 25px
div {
padding: 25px;
}
padding 및 요소 너비
CSS width속성은 요소의 내용 영역의 너비를 지정합니다. 내용 영역은 요소의 안쪽 여백, 테두리, 바깥쪽 여백을 포함합니다.(상자모델)
다음 예제에서 <div>요소의 폭은 300px입니다. 그러나 <div>요소의 실제 랜더링된 너비는 350px(300px + 25px왼쪽여백 + 25px오른쪽여백)입니다.
div {
width: 300px;
padding: 25px;
}
너비를 padding값과 관계없이 300픽셀로 유지하려면 box-sizing속성을 사용할 수 있습니다.
이 속성을 사용하면 요소는 폭을 유지할 수 있습니다. padding을 늘리면 컨텐츠 공간이 상대적으로 줄어듭니다. 다음은 그 예입니다.
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
등록된 댓글이 없습니다.