[CSS] 패딩(padding), 마진(margin), 테두리(border) 속성 알아보기!

728x90

SMALL

1. 패딩(padding)

내용과 테두리 사이의 간격
padding-top, padding-right, padding-bottom, padding-left
padding: 위 오른쪽 아래 왼쪽순으로 설정

[css]
div#padding { padding: 20px 50px 30px 10px;}

/* 위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px */

/* ⭐ 3개 */
div#padding { padding: 20px 50px 30px ;}

/* 위 20px, 오른쪽 왼쪽 50px, 아래 30px */

/* ⭐ 2개 */
div#padding { padding: 20px 50px ;}
/* 위 아래 20px, 왼쪽 오른쪽 50px */

/* ⭐ 1개 */
div#padding { padding: 20px ;}
/* 위 오른쪽 아래 왼쪽 모두 20px */

[HTML]
<div id='padding'>안녕하세요</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>패딩</title>
    <style>
        div {
            width: 200px;
            height: auto;
            background-color: bisque;
            margin: 20px;
            color: black;
        }
        #padding1 { padding: 10px 30px 20px 40px;}
        #padding2 { padding: 20px 30px 40px;}
        #padding3 { padding: 30px 50px;}
        #padding4 { padding: 50px;}
    </style>
</head>
<body>
    <h2>패딩</h2>
    <div id="padding1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis necessitatibus dolores, officia veniam quasi quibusdam autem asperiores aspernatur amet ipsa quas recusandae perspiciatis soluta fugiat ab repudiandae? Quis, voluptatum cumque.</div>
    <div id="padding2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui nemo consequatur, inventore ab enim ex rerum exercitationem vel amet maiores dicta ut quia? Id consequatur totam rerum accusamus. Voluptates, praesentium?</div>
    <div id="padding3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam ipsa labore, deserunt rerum harum ullam unde corporis ex natus maxime consequuntur, fuga voluptas soluta debitis. Eveniet recusandae autem deserunt sapiente?</div>
    <div id="padding4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam ipsa labore, deserunt rerum harum ullam unde corporis ex natus maxime consequuntur, fuga voluptas soluta debitis. Eveniet recusandae autem deserunt sapiente?</div>
</body>
</html>

2. 테두리(border)

내용(content)과 패딩(padding)주변을 감싸는 테두리
border-style: 테두리 모양
border-color: 테두리 색상
border-width: 테두리 두께
border: 한꺼번에 설정

<!DOCTYPE html>
<html lang="en">
<head>
    <title>테두리</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            margin: 15px;
            border-width: 5px;
            color: burlywood;
        }
        #border1 {border-style: solid;}
        #border2 {border-style: dotted;}
        #border3 {border-style: dashed;}
        #border4 {border-style: double;}
        #border5 {
            border-color: brown;
            border-top-style: dashed;
            border-right-style: dotted;
            border-bottom-style: double;
            border-left-style: ridge; 
        }
        #border6 {border: 3px dotted darkviolet;}
    </style>
</head>
<body>
    <h2>테두리</h2>
    <div id="border1"></div>
    <div id="border2"></div>
    <div id="border3"></div>
    <div id="border4"></div>
    <div id="border5"></div>
    <div id="border6"></div>
</body>
</html>

3. 마진(margin)

테두리(border)와 이웃하는 요소들 사이의 간격
마진은 눈에 보이지 않음
세로 겹침 현상이 나타남

📍 세로 겹침 현상
- 세로로 나열된 두 박스이 간격은 두 마진의 합이 아니라 둘 중 큰 값을 선택하는 현상

<!DOCTYPE html>
<html lang="en">
<head>
    <title>마진</title>
    <style>
        body {padding: 0; margin: 0;}
        div {
            width: 200px;
            height: 100px;
            background-color: salmon;
        }
        #margin1 { margin:  30px 50px 30px 50px;}
        #margin2 { margin:  30px 50px }
        #margin3 { margin:  50px }
        #margin4 { margin:  30px 5px 10px }
        #margin5 { margin:  30px auto; }
    </style>
</head>
<body>
    <h2>마진</h2>
    <div id="margin1"></div>
    <div id="margin2"></div>
    <div id="margin3"></div>
    <div id="margin4"></div>
    <div id="margin5"></div>
</body>
</html>

728x90

LIST

'Web > CSS' 카테고리의 다른 글

[CSS] 포지션(Position), 위치 지정방식의 종류, z-index (0)	2023.03.31
[CSS] 디스플레이(display) 속성, 폼(form) 알아보기! (0)	2023.03.31
[CSS] 박스모델(Box Model)과 내용(Content)의 차이점, 박스사이징(box-sizing) (0)	2023.03.30
[CSS] 배경 설정하기 - 컬러 배경 설정, 이미지 배경 설정, 배경 반복, 배경 위치 설정, 배경 스크롤 고정, 배경 이미지 크기 설정, 배경 속성 한꺼번에 적용 (0)	2023.03.30
[CSS] TEXT설정 - 6️⃣ 폰트/글꼴 설정, 웹폰트 적용, 구글 폰트 적용하기 (0)	2023.03.30