CSS: margin , padding

그동안 클론하면서 CSS 영역에서 시간을 많이 잡아먹거나 부족한 부분들을 개념 정리를 하나씩 다시 정리해보자

margin과 padding은 여백 요소 속성이다.
가장 위에 margin, padding box 그림을 아래 그림으로 영역의 값을
표현한 것이다.

해석을 하면 margin 영역은 위,오른쪽,아래,왼쪽 모두 8px ,
요소 사이즈는 가로 554.400px ,세로 200 px 이다.

조금 더 margin과 padding을 자세히 설명하면,

margin : 테두리 바깥 영역 , 주황색 부분을 말하는 것이고

padding: 테두리 안의 영역 , 녹색 부분을 말한다.

border: 금색 띠로 둘러진 경계선 부분이 테두리이다.

위에 그림 css 코드이다.
margin: 50px 50px 50px 50px;
padding: 50px ;

margin과 padding은 원하는 여백의 값을 두가지로 표현 할 수 있다.
margin의 예시 처럼 top,right,bottom, left 방향별로 지정 할 수 있고,
padding 처럼 위 오른쪽 아래 왼쪽 값이 같으면
값 한번 쓰는 걸로 적용 할 수 있다.

만약 원하는 방향으로 따로 지정해야 된다면,
margin-left : 50px;
padding-bottom: 30px;
이런식으로 지정하면 된다.

ex) padding 아래 쪽에 20px를 추가
margin 왼쪽에 100px를 추가인 박스를 만들어보자

• padding 위쪽 100px 추가
  margin 왼쪽 20px 추가

• padding 위쪽 100px 추가
  margin 오른쪽 50px 추가

• padding 오른쪽 100px 추가
  margin 오른쪽 50px 추가

예시를 보면 여백의 값으로 사이즈와 위치 조정이 가능한 것을 알수 있다.