-
패딩(padding)프로그래밍/HTML&CSS 2022. 9. 5. 20:18728x90
패딩이란 콘텐츠와 테두리 사이의 여백을 설정하는 속성이다.
상하좌우 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 예제 padding: 10px 30px 50px 70px; // 각 상 우 하 좌 지정 padding: 10px 50px; // 상하 좌우 지정 padding: 40px; // 상우하좌 동일 지정728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
박스 사이징(box-sizing) (0) 2022.09.07 마진(margin) (0) 2022.09.06 border-radius (0) 2022.09.03 테두리(border) (0) 2022.09.02 블록(block) 요소와 인라인(inline) 요소 (0) 2022.09.01