본문 바로가기

카테고리 없음

CSS margin 마진, padding 패딩은 무엇인가

안녕하세요~ 하우리뷰 입니다!

오늘은HTML CSS의 margin과 padding을 설명 해볼까 합니다!

.

.

우선 간략하게 말씀드리자면 margin은 외부와 해당박스의 간격을 의미합니다~!

padding은 박스안의 높이,길이 값을 넓혀주는 의미입니다!

.

.

.

위에 사진처럼 만약 웹상에서 중앙으로 주고싶다!

애초에 div 한테 width 값을줍니다 그리고 해당 div녀석한테

margin: 0 auto 를 주시면 중앙으로 정렬!

.

.

.

처음엔 div 녀석에다가 width: 300px 주고 배경석 pink로 주었습니다! 

.

.

완전 왼쪽에 박혀 있군요! 그렇다면 위에서 말했던것처럼 div녀석한테 margin: 0 auto로 주면 중앙으로 간다고했죠?

margin: 0 auto를 주었더니,

중앙으로 알맞게 갔습니다. 코드를 어느정도 이해하시는 부들이라면 나중에는 margin: 0 auto에서 자기가 원하는대로

상,하,좌,우 방향으로 조절이 가능합니다

.

.

margin: 상값 우값 하값 좌값 이런식으로 됩니다 이렇게 되면 총 4가지의 값이 들어가죠? 상황에 따라

4개의 값 3개의 값 2개의 값을 표현가능합니다

4개 : margin:상값 우값 하값 좌값

3개 : margin:상값 좌값 하값 

2개 : margin:상하값 좌우값

 

padding도 동일합니다~

padding또한 div박스 안에서 넓이 확장이 이뤄진다? 그런느낌이라고 생각하시면됩니다.