본문 바로가기
css

[html/css] padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom)

by 지구별에 2014. 3. 31.

 

 

[html/css] padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom)

 

 

지난 시간에는 margin 속성을 이용하여 레이아웃에 여백을 넣었습니다.

 

margin 속성 자세히 알아 보기

 

이번엔 padding 속성을 사용하여 레이아웃에 여백을 넣어 보겠습니다.

 

padding은 아래 그림에서 content(내용)와 border(선)사이의 공간을 말 합니다.

 

 

 

우선 아래 그림과 같은 레이아웃을 그려보았습니다.

 

지난 번 레이아웃에서 C D와 B 사이에 margin을 넣었다면,

 

이번엔 선 A를 하나 더 그려서, A와 B 사이에 padding을 넣는 방법입니다.

 

 

그림에 너비까지 계산해 보았는데요, 너비 값 계산 식은 다음과 같습니다 

 

 width+padding+margin+border

 

참고로 IE8과 IE 이전 버전에서는 width 속성 안에 padding과 border 값이 포함돼 있으므로

문서 타입을 규정해 주어야 합니다.

 

 DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)

 

 

  padding 속성 사용법

 

padding 속성 사용 법은 margin과 같습니다 

 

 

아래 지정값은 px, cm, %로도 지정할 수 있습니다*

*margin은 음수 값이 지정 가능하지만 padding은 음수값 지정이 안 됩니다*

 

padding-top (상단 여백)

padding-right (오른쪽 여백)

padding-bottom (아래 여백)

padding-left (왼쪽 여백)

 

사용 예

p {

padding-top: 5px;

padding-right: 5px;

padding-bottom: 5px;

padding-left: 5px;

}

 

 

[4면 한꺼번에 padding 지정하기]

 

p {

padding: 5px 7px 3px 0px;    (위, 오른쪽, 아래, 왼쪽 순임)

}

 

[4면이 모두 같을 때 padding 지정하기]

 

p {

padding: 5px;

}

 

[위, 오른쪽 왼쪽, 아래 padding 지정하기]

 

p {

padding: 5px 10px 0px:

}

 

[위 아래, 오른쪽 왼쪽 padding 지정하기]

 

p {

padding: 5px 10px;

}

 

 

[inline style로 넣어줄 때]

 

<p style="padding: 5px 10px;">동해물과 백두산이 마르고 닳토록 </p>

 

 

[external style로 넣어줄 때 ]

 

1. html로 아래와 같이 작성함 

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="padding.css" />
 </head>

<body>
<div id="a">
<div id="b">
  <div id="c">
  본문입니다
  </div>
  <div id="d">
  사이드바입니다
  </div>
</div>
</div>
</body>

</html>

 

 

 

 2. 아래를 padding.css로 저장함

 div#a{
width:719px;
height: 402px;
border:1px solid red;
padding:5px;
}

#b{
width:717px;
height: 400px;
border:1px solid red;
}

#c{
width: 498px;
height: 388px;
float:left;
border:1px solid red;
margin:5px; 
}
#d{
width: 198px;
height: 388px;
float:right;
border:1px solid red;
margin:5px 5px 5px 0px; 
}

 

 

실행 화면입니다.

 

 상하좌우 모두 padding: 5px 로 했습니다.

 

 

 

 

반응형

댓글