728x90
참고 사이트 : https://ofcourse.kr/css-course/margin-padding-속성
CSS margin,padding 속성 - ofcourse
개요 margin과 padding 속성은 각각 바깥쪽 여백, 안쪽 여백을 의미합니다. width, height 속성과 마찬가지로 숫자 뒤에 단위를 표시하여 적습니다. margin과 padding는 border 을 경계로 나뉩니다. 방향 방향
ofcourse.kr
1. Margin
테두리(border)와 이웃하는 요소 사이의 간격. 즉, 바깥쪽 여백
| 속성 | 설명 |
| margin-top: 10px | 위쪽의 바깥 여백 |
| margin-right: 10px | 오른쪽의 바깥 여백 |
| margin-bottom: 10px | 아래쪽의 바깥 여백 |
| margin-left: 10px | 왼쪽의 바깥 여백 |
| margin: 10px 10px 10px 10px | 위, 오른쪽, 아래, 왼쪽 순으로 바깥 여백(시계방향으로 작성) |
| margin: auto | 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정 설정한 요소의 부모 요소의 정중앙에 위치하도록 한다 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>실습해보기</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kirang+Haerang&display=swap" rel="stylesheet">
<style>
div {
width: 500px;
height: 300px;
background-image: url('../blog_example/books.jpg');
background-size: cover;
font-family: 'Kirang Haerang', cursive;
margin: auto;
}
</style>
</head>
<body>
<div>
<h1>안녕하세요!</h1>
</div>
</body>
</html>
2. Padding
내용(content)과 테두리(border) 사이의 간격. 즉, 안쪽 여백
| 속성 | 설명 |
| padding-top: 10px | 위쪽의 바깥 여백 |
| padding-right:10px | 오른쪽의 바깥 여백 |
| padding-bottom: 10px | 아래쪽의 바깥 여백 |
| padding-left: 10px | 왼쪽의 바깥 여백 |
| padding: 10px 10px 10px 10px | 위, 오른쪽, 아래, 왼쪽 순으로 바깥 여백(시계방향으로 작성) |
<style>
div {
width: 500px;
height: 300px;
background-image: url('../blog_example/books.jpg');
background-size: cover;
font-family: 'Kirang Haerang', cursive;
margin: auto;
padding: 30px;
}
</style>
728x90
'WEB > CSS' 카테고리의 다른 글
| [CSS] 다중 클래스 접근 및 Font-weight : Bold 설정 (0) | 2024.05.16 |
|---|---|
| [CSS] 글자 관련 CSS 정리 (0) | 2023.02.16 |
| [CSS] CSS 선택자(Selector) 정리 (0) | 2023.02.12 |
| [CSS] 구글 웹 폰트 사용해보기 (0) | 2023.02.07 |
| [CSS] 배경(background) 관련 기본 CSS 사용해보기 (0) | 2023.02.06 |
