패딩(padding)

하와이블루 2022. 9. 5. 20:18

728x90

패딩이란 콘텐츠와 테두리 사이의 여백을 설정하는 속성이다.

상하좌우 4 방향의 패딩을 한꺼번에 지정할 수 있고, padding 다음에 하이픈(-)을 넣고 위치를 나타내는 예약어로

top, right, bottom, left를 사용해서 특정 방향에만 지정하여 패딩을 적용할 수 있다.

padding-top:상
padding-right:우
padding-bottom:하
padding-left:좌
padding:상 우 하 좌 모든 방향 설정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>패딩</title>
    <style>
        div{
            width: 200px;
            height: auto;
            background-color: deepskyblue;
            display: inline-block;
            margin: 20px;
            color: white;
        }
        #padding1{ padding: 10px 30px 50px 70px; }
        #padding2{ padding: 10px 50px; }
        #padding3{ padding: 40px; }
    </style>
</head>
<body>
    <h2>패딩</h2>
    <div id="padding1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Eveniet eum, quasi, delectus mollitia ab totam enim eaque 
        quaerat quos odio id consectetur tempora temporibus. 
        Voluptatem dignissimos molestiae ipsum non fugiat.
    </div>
    <div id="padding2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Eveniet eum, quasi, delectus mollitia ab totam enim eaque 
        quaerat quos odio id consectetur tempora temporibus. 
        Voluptatem dignissimos molestiae ipsum non fugiat.
    </div>
    <div id="padding3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Eveniet eum, quasi, delectus mollitia ab totam enim eaque 
        quaerat quos odio id consectetur tempora temporibus. 
        Voluptatem dignissimos molestiae ipsum non fugiat.
    </div>
</body>
</html>

        padding: 10px 30px 50px 70px;
        // 각 상 우 하 좌 지정
        
        padding: 10px 50px;
        // 상하 좌우 지정
        
        padding: 40px;
        // 상우하좌 동일 지정

728x90

저작자표시 (새창열림)