티스토리 뷰

[개발]프로그래밍/css3

[css3] padding - 내용과 테두리 사이의 여백 설정

좋은 블로그 2021. 5. 4. 09:06
1. 개념
padding - 내용과 테두리 사이의 여백 설정
padding는 요소 안에 있는 내용과 테두리 사이의 여백을 설정하는 것
즉 테두리 안쪽의 여백이라고 생각하면 됨
padding-top , padding-right , padding-left , padding-bottom 등이 있고 padding을 통해 한번에 설정도 가능
2. 태그
padding
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<style>
div
{
border : 1px solid #000 ;
margin-top : 20px ;
}
</style>
<body>
1
<div style =' padding-top : 30px ' ></div>
2
<div style =' padding : 30px 50px ' ></div>
3
<div style =' padding : 10px 50px 20px 100px ' ></div>
4
<div style =' padding : 30px ' ></div>
</body>
</html>
결과 화면
padding 사용 예제
코드 설명
1
padding-top: : 30px ;
padding은 margrin과는 다르게 요소 안에 있는 내용과 테두시 사이의 간격을 조절하는 속성입니다.
padding-top을 30px로 했다고 하는 것은 위에 있는 테두리와 내용과의 간격을 30px로 준다는 것입니다.
2
<padding : 30px 50px ;
padding 도 margin 처럼 각각의 방향으로 여백값을 따로 따로 설정이 가능합니다.
위에서 보는 것처럼 값을 2개를 입력했을 경우에는 위 아래 안쪽 여백이 30px , 좌 우 안쪽 여백을 50px로 주는 것입니다.
3
padding : 10px 50px 20px 100px ;
padding으로 값을 4개를 입력하게 되면 위를 기준으로 시계방향으로 안쪽 여백을 주게 됩니다.
위 → 오른쪽 → 아래 → 왼쪽으로 해당하는 값 만큼 테두리와 내용과의 여백을 주게 되는 것입니다.
위쪽 안쪽 여백은 10px , 오른쪽 안쪽 여백은 50px , 아래 안쪽 여백은 20px , 왼쪽 100px의 안쪽 여백이 생기게 됩니다.
4
padding : 30px ;
padding을 30px로 주게 되면 상 , 하 , 좌 , 우 모두 안쪽으로 30px의 여백이 생기게 됩니다.
저작자표시

'[개발]프로그래밍 > css3' 카테고리의 다른 글

[css3] float - 왼쪽,오른쪽 배치  (0) 2021.05.07
[css3] box-sizing - 박스 너비 기준  (0) 2021.05.06
[css3] margin - 주변 여백 설정  (0) 2021.05.03
[css3] border-shadow - 그림자 효과 내기  (0) 2021.04.30
[css3] border-radius - 모서리 둥글게 만드는 속성  (0) 2021.04.29
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday