안녕하세요~ 하우리뷰 입니다!
오늘은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박스 안에서 넓이 확장이 이뤄진다? 그런느낌이라고 생각하시면됩니다.