CSS_여백(margin, padding)

song·2023년 7월 18일

CSS_web1

목록 보기

5/18

예민하게 다뤄야함.
레이아웃이 어그러지기 쉽기 때문.

★margin과 padding은 블록레벨인 영역만 조정이 가능하다. (인라인 적용 안 됨)

단위
: px, %
%사용 가능하지만 부모요소 기준이기 때문에 얼마나 들어갈지 정확히 알 수 없음.
그래서 가급적 px권장
★여백값 상속 안됨

1. margin : 해당요소의 바깥쪽 여백

크롬 개발자도구에서 살구색 영역
크기는 유지하되, 위치를 옮기고 싶다.
body에 기본 margin: 8px 걸려있기 때문에 100% 다 쓰려면 0px로 걸어줘야 한다.
- margin:0px;
마진겹침현상 : 마진끼리 겹치면 각각의 마진만큼 떨어지지 않고 겹쳐서 중복된 마진은 적용되지 않는다.
- 근데 이 현상이 안나타날 수도 있다. (float, position 때문에. 확률이 높진 않음. )
  레이아웃끼리 떨어뜨려놓을 때 bottom만 주고(마지막 레이아웃 제외) 감싸는 부모에게 위아래로 여백을 주자.

margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
margin-right: 50px;

margin: 0; /* 한 방 */

margin: 10px 20px 30px 40px;
위와같이 쓰면 한줄에 마진을 한번에 쓸 수 있다.
순서는 top, right, bottom, left(top부터 시계방향)
4개값이 아닌 더 적게 입력해놨다면 다시 돌아가서 진행.
ex) margin: 10px 20px 30px;
top : 10px, right : 20px, bottom : 30px, left : 20px
ex) margin: 10px 20px;
top : 10px, right : 20px, bottom : 10px, left : 20px
★block 레벨 요소 가로 가운데 정렬 방법
: ex) margin: 0 auto; ex) margin: auto;
margin넣는 것 대신 영역을 아예 크게 잡아서 margin이 있는 척 할 수 있다.
-> 대신 그러면 끝쪽 margin관리하기는 힘들다.

2. padding : 해당요소의 안쪽 여백

안에 여백을 둬서 크기를 키우고 싶다.

padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;

padding: 0; /* 한 방 */

padding: 10px 20px 30px 40px;
위와같이 쓰면 한줄에 마진을 한번에 쓸 수 있다.
순서는 top, right, bottom, left(top부터 시계방향)
4개값이 아닌 더 적게 입력해놨다면 다시 돌아가서 진행.
- ex) padding: 10px 20px 30px;
  -> top : 10px, right : 20px, bottom : 30px, left : 20px
- ex) padding: 10px 20px;
  -> top : 10px, right : 20px, bottom : 10px, left : 20px
★뚱뚱이 방지(여백을 가지고 안으로 가지고 들어옴)
- box-sizing : border-box
  width를 줄 때 부모사이즈 넘칠 때 box-sizing : border-box;를 쓰면 된다.
  그럼 크기가 얼만해지던, 패딩이 들어가서 넘치던, 부모사이즈 만큼만 차지하게 된다.
  - width값을 주지 않으면 안줘도 된다! block레벨은 가능한 끝에서 끝까지이고 width값을 주지 않으면 기본값은 auto니까 패딩을 잡아놓고 가능한만큼 끝에서 끝까지 잡으니까 뚱뚱해지지 않는다.
  - width값을 줄 때 사이즈가 넘치는 이유는 해당영역을 우선 잡아놓고 padding(바깥영역)을 추가로 잡으니까 뚱뚱해지는 것이다.
  padding과 테두리를 가지고 부모 사이즈 안으로 들어옴.
  ★margin값은 조정 안됨!! margin값은 내 값이 아니고 외부 값이라 안됨. 별도로 줘야함.
- padding값이 지정한 영역값보다 더 클 때 box-sizing: border-box를 쓴다고 해도 지정한 영역값을 넘어 패딩값만큼 영역이 지정된다.
  물론 쓸 수 있는 영역은 없다.
만약 height를 줄 수 없는 상황에서 크기를 늘리려면 padding을 주면 된다.
물론 쓸 수 있는 영역은 여전히 없다.
부모가 padding값을 가지고 있어서 자식이 padding만큼의 공간을 차지하고 싶을 때는 position을 주면 된다.
```
position: absolute;
left: 0;
top: 100%; 
width: 100%;
```
부모기준 위치에서 부모 바로 밑에 와야하니까 top: 100%를 주고, position쓰면 width값 부모기준으로 잡을 수 있으니 width 100%를 잡으면 된다.
메뉴 양쪽에 padding값을 주고 마지막 오른쪽 padding값을 빼면 라인 맞춰서 좋은데 커서는 안막혀서 싫을 때
margin-right: -10px하면 된다.