css기초 마진(Margin)과 패딩(padding)
마진(margin)과 패딩(padding)에 대해서 알아보도록 하겠다.
마진과 패딩은 콘텐츠를 배치하기 위해서 자주 사용된다.
CSS 마진과 패딩은 그림으로 보면 아래와 같이 표현할 수 있다.
자세한 내용은 각 부분에서 알아보도록 하겠다.
태그와 태그 사이의 여백 - margin
CSS 마진(margin)은 태그와 태그 사이의 여백, 현재 요소 주변의 여백 간격을 조절하기 위해서 사용한다.
마진(margin) 속성에는 margin-top, margin-right, margin-bottom, margin-left가 있으며
margin 속성을 사용하면 네 가지 방향 모두(top → right → bottom → left)를 한 번에 지정할 수 있다.
속성값으로는 크기(px, em 등)나 백분율(%), auto 등의 값을 지정한다.
콘텐츠와 테두리 사이의 여백 - padding
CSS 패딩(padding)은 콘텐츠와 테두리 사이의 여백, 테두리 내부의 여백을 조절하기 위해서 사용한다.
패딩(padding) 속성에는 padding-top, padding-right, padding-bottom, padding-left가 있으며,
네 가지 속성을 한 번에 지정하기 위해서는 padding 속성을 사용한다.
속성값은 크기(px, em 등), 백분율(%), auto 등을 지정할 수 있다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div {
margin: 10px 0px;
border: 1px solid #bcbcbc;
}
div.a {
padding: 10px;
}
div.b {
padding: 10px 20px;
}
div.c {
padding: 10px 20px 30px;
}
div.d {
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="a">
<code>padding: 10px;</code>
</div>
<div class="b">
<code>padding: 10px 20px;</code>
</div>
<div class="c">
<code>padding: 10px 20px 30px;</code>
</div>
<div class="d">
<code>padding: 10px 20px 30px 40px;</code>
</div>
</body>
</html>
위 코딩의 결과값은 아래와 같습니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| CSS DIV 메뉴만들기 (0) | 2018.03.16 |
|---|---|
| [CSS 기초강좌] 아이디 선택자(ID Selector) (0) | 2018.03.08 |
| [CSS 기초] 클래스 선택자 (0) | 2018.03.06 |
| [CSS 강좌] 아이디 선택자 (0) | 2018.03.06 |
| [CSS 강좌] CSS Margin 속성 (0) | 2018.03.05 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.