요소 : 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다.
Padding : 내용과 테두리 사이의 여유 공간
Margin : 요소 주위의 여백(테두리 밖의 공간)
Padding
padding을 주는 여러 가지 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#p1 {
border: 3px solid red;
padding-top: 10px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 70px;
}
#p2 {
border: 3px solid blue;
padding: 10px 50px 70px 20px;
}
#p3 {
border: 3px solid green;
padding: 20px;
}
#p4 {
border: 3px solid black;
padding: 20px 40px;
}
</style>
</head>
<body>
<p id="p1">가장 직관적으로 padding 주는 방법</p>
<p id="p2">padding 속성을 이용하면 순서는 위 오른쪽 아래 왼쪽 이다(시계방향)</p>
<p id="p3">모두 같은 padding 속성을 주고 싶으면 그냥 padding에 값만 입력하면 된다</p>
<p id="p4">좌, 우 값이 같고 위, 아래 값을 같게 주고 싶으면 padding 속성에 위, 아래 값(20px)을 주고 좌, 우 값(40px)을 주면 된다.</p>
</body>
</html>
Margin
margin 도 동일하다.
#p1 {
border: 3px solid red;
margin-top: 30px
margin-bottom: 10px
margin-left: 20px
margin-right: 60px
}
#p2 {
margin: 20px 40px 60px 80px
}
#p3 {
margin: 30px
}
#p4 {
margin: 20px 60px
}
가운데 정렬
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p {
border: 3px solid black;
width: 330px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<p>가운데 정렬은 margin을 auto로 설정해주면 된다.</p>
</body>
</html>
부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다.
이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
'CS > HTML CSS' 카테고리의 다른 글
| 6. width, height, overflow (0) | 2022.05.07 |
|---|---|
| 5. border (0) | 2022.05.07 |
| 3. Box Model 기초 (0) | 2022.05.07 |
| 2. 클래스, 아이디, 주석 (0) | 2022.05.06 |
| 1. html/css 기본 태그 (0) | 2022.05.06 |