CSS 패딩 속성: 테두리선과 내용 사이의 거리
참고: 일반적으로 너비 및 높이 속성이라고 부르는 속성은 내부 및 외부 여백과 테두리선을 제외한 콘텐츠의 너비와 높이를 나타냅니다.
padding-left: 왼쪽 내부 패딩 거리, 왼쪽 줄과 내용 사이의 거리.
padding-right: 오른쪽 내부 패딩 거리, 오른쪽 줄과 내용 사이의 거리.
padding-top: 상단 패딩 거리, 상단 가장자리와 콘텐츠 사이의 거리.
padding-bottom: 하단 패딩과 하단 라인 사이의 콘텐츠까지의 거리입니다.
약식
padding:10px; //4변 내부 패딩은 10px
padding:10px 20px; //상하 10px, 좌우 20px
padding: 5px 10px 20px //상하 5px; 왼쪽 및 오른쪽의 경우 10px, 아래쪽은 20px
padding:5px 10px 15px 20px; //순서는 "위, 오른쪽, 아래, 왼쪽"이어야 합니다
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
border:1px solid red;
background-color:#f0f0f0;
width:300px;
padding:20px;
}
</style>
</head>
<body>
<div class="box">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。
</div>
</body>
</html>
CSS 여백 속성: 가장자리에서 바깥쪽의 거리
margin-왼쪽: 왼쪽 선에서 바깥쪽으로 떨어진 거리.
margin-right : 오른쪽 사이드라인에서 바깥쪽 거리
margin-top : 위쪽 사이드라인에서 바깥쪽 거리.
margin-bottom: 하단 라인에서 바깥쪽으로 떨어진 거리.
약식
margin:10px; //외부 여백 4개는 10px
margin:10px 20px //상하 여백 10px, 좌우 여백 20px
margin:5px 10px 15px //상하 여백 5px, 왼쪽 오른쪽 여백 10px, 아래쪽 여백 15px
margin:5px 10px 15px 20px; //순서는 "위, 오른쪽, 아래, 왼쪽"이어야 합니다
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
border:1px solid red;
background-color:#f0f0f0;
width:300px;
margin:20px;
}
</style>
</head>
<body>
<div class="box">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。
</div>
</body>
</html>참고: 패딩과 여백은 혼동하기 쉽습니다. 두 예제 간의 출력 차이를 주의 깊게 관찰하세요
다음 섹션