CSS 기본 튜토리얼: 패딩 및 여백 속성

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>

참고: 패딩과 여백은 혼동하기 쉽습니다. 두 예제 간의 출력 차이를 주의 깊게 관찰하세요

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전