상자 모델 채우기

요소 콘텐츠와 테두리 사이의 거리를 설정할 수 있는데, 이를 '패딩'이라고 합니다. 채우기도 위쪽, 오른쪽, 아래쪽, 왼쪽(시계방향)으로 나눌 수 있습니다. 다음 코드:

div{padding:20px 10px 15px 30px;}

순서를 혼동하지 마세요. 위 코드를 따로 작성할 수 있습니다.

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

상단, 오른쪽, 하단, 왼쪽 패딩이 모두 10px인 경우

div{padding:10px;}

위와 같이 작성할 수 있습니다. 동일한 10px이고 왼쪽 및 오른쪽 패딩이 동일한 20px인 경우 다음과 같이 작성할 수 있습니다.

div{padding:10px 20px;}

rrree

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>填充</title> <style type="text/css"> #box1{ width:100px; height:100px; padding:10px; border:1px solid red; } </style> </head> <body> <div id="box1">盒子1</div> </body> </html>

제출하다 코드 재설정

자동운전