반응형
CSS Padding
padding은 내용과 border(경계선)사이의 공백을 설정할때 사용한다.
padding
여기는 내용
padding은 상하좌우 따로 값을 줄 수 있다.
padding의 상하좌우 값을 주는 문법은 이전 강좌의 margin과 동일하다.
예제1
div { padding-top: 100px;
padding-bottom: 70px;
padding-right: 150px;
padding-left: 50px;
}
padding-bottom: 70px;
padding-right: 150px;
padding-left: 50px;
}
예제2
div {padding:100px 150px 70px 50px;}
결과
padding값을:100px 150px 70px 50px 늘리는 것입니다.
Van-xy.
Van-xy.
이전 Margin강좌보기
2014/09/19 - [강좌/CSS 강좌] - CSS 기초강좌 11 (Margin)
Padding은 Border(선)과 Content(내용)사이의 공간을 넓히고 줄인다고 생각하면 됩니다.
종합예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:500px;
background-color: #ccffcc;
border:6px double #006633;
}
div.padd {
width:500px;
padding-top: 60px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 100px;
}
</style>
</head>
<body>
<div>이것은 패딩값을 넣기 전이죠.</div><br/>
<div class="padd">이것은 패딩값을 넣은 것입니다. 뭐가 다른지 금방 아시겠죠.<br/>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.</div>
</body>
</html>
결과
즐거운 하루 되세요. ^^ 버튼을 누르면 이것은 패딩값이 적용되면서 선안쪽으로 여백이 생기죠.
패딩값이 바뀌니까 여백이 늘어나죠 !!. 뭐가 다른지 금방 아시겠죠.
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.
반응형
