CSS #4 Margins & Padding

Box

 

Margin :

Margins are used to create space around elements. outside of any defiend borders.

마진을 통해서 Border(경계선) 바깥의 공간의 값을 지정할 수 있습니다.

 

Shorthand :

/* Syntax */
margin-top: 값1;
margin-bottom: 값3;
margin-right: 값2;
margin-left: 값4;

/* Shorthand Syntax */
margin: 값1, 값2, 값3 값4;

이전의 내용과 마찬가지로 Shorthand를 사용할 때는 시계방향으로 값이 지정됩니다.

4개의 값이 지정될 경우 : 위, 오른쪽, 아래, 왼쪽

3개의 값이 지정될 경우 : 위, 양옆, 아래

2개의 값이 지정될 경우 : 위와 아래, 양옆

1개의 값이 지정될 경우 : 모든 방향

 

Auto

auto를 사용할경우 수평값이 (가로의 값) 좌우 값을 동일하게 나눈 값을 지정하게 됩니다.

 

Margin Collapse

위 아래의 마진 값은 연속되어서 사용 될 경우 충돌하는 경우가 있습니다. (좌 우의 값에는 해당되지 않습니다.)

 

---

 

Padding :

Padding is used to create space around an element’s content, inside of any defined borders

패딩을 통해서 Border안 (경계선 안쪽 )값을 지정할 수 있습니다.

패딩의 적용 방식은 Margin과 동일합니다.

 

Padding and Element Width :

The CSS width property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element. So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.

witdh 값으로 contenet 영역의 너비를 지정한다고 하면 padding 값이 정의한 width값에 더해진다고 합니다. 따라서 총 width 값이 다른 결과가 나오다고 합니다.

 

 

div.hey {
  width: 300px;
  padding: 25px;
  background-color: yellow;
}

div.you {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}

예를 들어 div값이 다음과 같이 설정되었다면 ‘실제 width의 값은 350px로 설정된다’ 라는 의미입니다. (300px + 25px(왼쪽 padding값) + 25px(오른쪽 padding값) = 350px)

너비를 설정한 값으로 고정하기 위해서는 box-sizing property를 사용하면 됩니다.

단, box-sizing을 사용하면 실제 width값은 보존하지만 content 공간이 그만큼 줄어듭니다.

Padding and Width

 

Height and Width

The height and width properties are used to set the height and width of an element.

높이와 너비는 Content area의 영역의 높이와 너비를 지정할수 있게 해줍니다.

div {
  height: 100px;
  width: 350px;
  background-color: powderblue;
  margin: 20px;
	padding: 20px;
}

Height and width