테스트 사이트 - 개발 중인 베타 버전입니다

CSS Padding

CSS Padding

 

CSS 패딩 속성은 내용 주위에 공간을 생성하는 데 사용됩니다.

 

패딩은 요소 주위의 내용 (테두리 안쪽)을 지 웁니다.

 

CSS를 사용하면 패딩을 완벽하게 제어 할 수 있습니다. 요소의 각면 (위쪽, 오른쪽, 아래쪽 및 왼쪽)에 대해 채우기를 설정하기위한 CSS 속성이 있습니다.

 

 

패딩 - 개별면

CSS에는 요소의 각면에 대해 채우기를 지정하는 속성이 있습니다.

 

padding-top

padding-right

padding-bottom

padding-left

 

 

모든 패딩 속성은 다음 값을 가질 수 있습니다.

 

length - px, pt, cm 등으로 패딩을 지정합니다.

% - 포함하는 요소의 폭의 %로 채우기를 지정합니다.

inherit - 패딩을 부모 요소에서 상속해야한다고 지정합니다.

 

 

다음 예제에서는 <p> 요소의 네면에 대해 서로 다른 패딩을 설정합니다.

 

Example

p {

    padding-top: 50px;

    padding-right: 30px;

    padding-bottom: 50px;

    padding-left: 80px;

}

 

<!DOCTYPE html>

<html>

<head>

<style>

div {

    border: 1px solid black;

    background-color: lightblue;

    padding-top: 50px;

    padding-right: 30px;

    padding-bottom: 50px;

    padding-left: 80px;

}

</style>

</head>

<body>

 

<h2>Using individual padding properties</h2>

 

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

 

</body>

</html>





댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
1720
1718
1716
1711
1710
1707
1704
1700
1693
1689
1687
1686
1683
1680
1676
1675
1674
1671
1667
1655
1649
1646
1641
1638
1636
1633
1631
1627
1624
1623