[css] padding & margin 속성
margin
[기본값]
margin : length|auto|inherit;
length : px, pt, cm, %와 같은 수치값을 입력 시킬 수 있습니다.
auto : 수평을 기점으로 자동으로 양옆 속성을 맞춰줍니다.
inherit : 부모 요소를 상속받습니다.
[복합속성]
p { margin: 25px 50px 75px 100px; }
[개별속성]
p {
margin-top : 25px;
margin-bottom : 50px;
margin-righ t: 75px;
margin-left : 100px;
}
개별 속성의 top, bottom, right, left을 복합으로 묶어놓은 속성은 알아보기 쉽게 각각의 위치에 맞는 수치값을 넣어 마진과 패딩을 적용시켜주면 되는데, 복합 속성은 지원하는 수치값이 각각 다르다는 점이 있습니다.
복합 속성 수치 설정하기
css의 복합 속성 수치를 설정하는 값은 크게 총 5가지로 분류됩니다.
margin과 padding을 제외하고도 나머지 css의 수치 설정값도 밑의 예시와 동일합니다.
auto : 수평을 중심으로 왼쪽과 오른쪽에 대비해 균등하게 배치해 줍니다.
※ padding은 auto값이 없습니다.
margin&padding : 상, 우, 하, 좌
컨테이너를 기점으로 4방향에 동일한 수치값을 지정해 줍니다.
복합4속성 수치 작성 시 주의점
복합속성은 우리가 흔히 알고 있는 4개의 수치값이 상, 하, 좌, 우로 되어있는 것이 아닌 시계방향으로 이루어져 있습니다.
즉 상, 우, 하, 좌로 이루어져 있기 때문에 (top, right, bottom, left순서) 4속성을 사용할 때에는 0시부터 12시까지 시계가 돌아가는 모양을 생각하시면서 작업하면 편리합니다.
※ 나머지 1,2,3 속성의 수치값은 위를 참고하셔서 무조건 외우실 수밖에 없습니다.
margin&padding : 상, 하 / 좌, 우
컨테이너를 기점으로 상하, 좌우 2방향에 동일한 수치값을 지정해 줍니다.
흔히 html상에서 중앙 정렬을 할 때 많이 쓰이는 margin:0 auto;의 개념은
상하의 수치는 0, 좌우의 수치는 중앙으로 정렬이라는 뜻과 동일합니다.
margin&padding : 상, 좌우, 하
컨테이너를 기점으로 상, 좌우, 하 3방향에 수치 값을 지정해 줍니다.
margin&padding : 상, 우, 하, 좌
컨테이너를 기점으로 상단, 오른쪽, 하단, 왼쪽 4방향에 각각 수치 값을 지정해 줍니다.
margin 속성의 혼합
더하기 : margin+margin
p.a { margin : 30px 0; }
p.b { margin : 20px 0; }
위화 같이 동시에 마진 값을 적용될 경우 상쇄되어 큰 값만 적용됩니다.
상속받기 : inherit
div { border: 1px solid red; margin-left : 100px; }
p.exl { margin : inherit; }
<div>
<p class="exl">마진 값이 적용된 상속값입니다.</p>
</div>
div에 마진 속성이 들어있습니다.
margin-left:inherit;으로 설정할 경우 부모요소로 부터 마진값을 상속합니다.
상위요소(부모)에 margin값이 들어 있을 경우 그 자식 속성을 inhreit으로 설정 시 상속받아 적용시킬 수 있습니다.
padding
컨텐츠와 컨테이너 사잉에 공간감을 부여하는 padding(패딩)값은 margin과 동일한 수치값을 적용하되 auto값만 없다고 생각하면 됩니다.
단, 밀어내는 margin값과는 다르게 본문을 부풀리는 효과의 padding은 수치가 벗어나는 것을 잡아주는 별도의 기능을 사용할 수 있는데, 그 속성은 box-sizing입니다.
padding 속성의 혼합
더하기 : padding+padding
p.a { padding : 30px 0; }
p.b { padding : 20px 0; }
위와 같이 동시에 패딩 값이 적용될 경우 합산되어 30px + 20px = 50px이 적용됩니다.
컨테이너 정렬하기 (box-sizing:border-box;)
폭이 300px로 정해져 있는 컨텐츠 밑에 padding값을 적용한 300px컨테이너를 똑같이 맞추는 방법
div.exl { width:300px; background-color:yellow; }
div.ex2 { width:300px; padding:25px; background-color:lightblue; }
<h2>분문제목</h2>
<div class="exl">폭이 300px인 컨테이너</div>
<br>
<div class="ex2">폭이 300px에 padding 25px을 더한 컨테이너 값, 총 300+25+20=350px값이 영역을 벗어나 적용</div>
padding은 내부에 여백을 만들고, margin은 외부에 여백을 만듭니다.
padding을 작용하지 않은 p태그 문장과 적용된 문장의 차이를 살펴보시면,
일단 적용된 문장은 구별하기 편하도록 배경색을 넣었고 내부에 영역이 생긴 걸 알 수 있습니다
위처럼 숫자를 하나만 입력하면 상/하/좌/우 모두 입력한 수치만큼 내부영역이 늘어납니다.
위의 코드에서는 두 개의 값을 입력해 보았는데요~
이 의미는 위에 주석처리한 내용과 같습니다
첫번째는 상/하의 패딩값, 두번째는 좌/우의 패딩값을 의미합니다.
즉 상하는 20px , 좌우는 40px이 늘어나게 됩니다~!
숫자가 3개가 들어가는 경우는 위의 주석과 같습니다
그러니 예제처럼 작성하면 위는 20px, 좌우 40px, 아래 10px이 적용이 되는데요
이 방법은 별로 사용되는 방법은 아닙니다 ㅎㅎ
위의 예시처럼 숫자가 4개가 들어가는 경우는
'위 오른쪽 아래 왼쪽' 으로 시계방향처럼 움직인다는 점을 알 수 있습니다.
이번에는 마진에 대해서 알아보도록 할게요~!
margin도 마찬가지로 영역을 늘리는 방법 중 하나인데 padding과는 차이가 있습니다.
padding이 자신의 몸을 늘리는 것이라 한다면
margin은 내 몸을 그대로 유지한 채 주변 공간을 늘리는 것이랍니다.
div를 통해 마진값의 변화를 좀 더 쉽게 구분하게끔 만들었습니다 (굳이 없어도 되는 요소입니다~)
적용되는 원리는 위에서 설명드린 padding과 같습니다
예시대로 코딩하시면 위/오른/아래/왼쪽이 각 20px,40px,10px,60px로
외부 영역이 생성됨을 알 수 있습니다~
이제 padding과 margin의 차이, 이해가시나요??
다시 간단히 말씀드리자면,
내부 영역의 부피를 키우려면 padding,
내부는 그대로고 주변의 공간만 늘리고자 할때는 margin을 사용하시면 됩니다
값을 입력하는 기호는 둘 다 동일하니 기호에 맞게 마크업하시면 되겠습니다