TIL: CSS margin 과 padding

margin

 

CSS는 element의 각 사이드에 대한 여백을 지정하는 속성이 있다.

 

margin-top
margin-right
margin-bottom
margin-left

 

모든 여백 속성은 다음 값을 가질 수 있다.

auto - 브라우저가 여백을 계산한다.

길이 - 여백을 px, pt, cm 등으로 지정.

% - 포함하는 요소 너비의 %로 여백을 지정한다.

상속 - 여백이 부모 요소에서 상속되어야 함을 지정한다.

*tip: 음수 값이 허용된다.

 

코드를 줄이려면 하나의 속성에 모든 여백 속성을 지정할 수 있다. 작동 방식은 다음과 같다.

 

margin 속성에 4개의 값이 있는 경우 

 

p { 
	margin: 25px 50px 75px 100px;
}

 

상단 25px, 오른쪽 50px, 하단 75px, 왼쪽 100px

 

margin 속성에 3개의 값이 있는 경우

 

p {
	margin: 25px 50px 75px;
}

 

상단 여백 25px, 좌우 여백 50px, 하단 여백 75px

 

margin 속성에 2개의 값이 있는 경우

 

p {
	margin: 25px 50px;
}

 

상하 25px, 좌우 50px 의 여백을 가진다.

 

margin 속성에 1개의 값이 있는 경우

 

p {
	margin: 25px;
}

 

자동 값

margin 속성을 auto로 설정해서 element를 가로로 중앙 정렬시킬수 있다.

 

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

 

inherit 상속 

이 예제는 <p class = "ex1"> 요소의 왼쪽 여백이 상위 요소 (<div>)에서 상속되도록 한다.

 

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

 

CSS 여백 축소

요소의 상단 및 하단 여백은 때때로 두 여백중 가장  큰 여백과 동일한 단일 여백으로 축소된다.

 

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

상식적으로 <h1>과 <h2> 사이 세로 여백은 총 70px이 되어야 한다고 생각되어 지지만 여백축소로 인해 실제 여백은 50px이 된다.

반면 패딩은 절대  축소되지 않음.

 

 

---

 

padding

패딩은 정의된 테두리 내부의 요소 콘텐츠 주위에 공간을 만드는 데 사용된다.

 

padding-top
padding-right
padding-bottom
padding-left

 

길이 - px, pt, cm 등으로 패딩을 지정한다.

% - 포함하는 요소 너비의 %로 패딩을 지정한다.

상속 - 패딩이 부모 요소에서 상속되어야 함을 지정한다.

tip: 음수 값은 허용되지 않는다.

 

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

 

padding도 margin과 마찬가지로 속성에 4개, 3개, 2개, 1개의 값이 있는 경우가 있고 같은 방법으로 쓰일 수 있음.

 

div {
  width: 300px;
  padding: 25px;
}

 

하지만 margin과 다른점은 요소에 지정된 너비가 위와 같이 있는 경우에 해당 요소에 추가된 패딩이 요소 전체 너비에 추가된다. 따라서 이 요소의 실제 너비는 350px이 된다. 

종종 이것은 의도치 않은 결과를 초래하기도 함.

 

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

 

패딩의 양에 관계없이 너비를 300px으로 유지하려면 box-sizing 속성을 사용하면 된다. 아래 링크에서 직접 사용해 볼 수 있음.

 

https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_width2 

W3Schools online HTML editor

 

 

Reference

https://www.w3schools.com/css/css_margin.asp

CSS Margin