[CSS3] margin 마이너스에 대한 비밀~!

IT쿠키·2021년 9월 17일
2

[SCSS 지식]

목록 보기
2/3
post-thumbnail

[Margin] 에 대해서 잘 알고 있으신 가요?

보통 [margin] CSS 같은 경우 간격을 띄울 때 사용을 합니다.
하지만 부모요소의 margin-left : -100%;를 주게 될 경우 생각지도 못한 반응이 일어나는 걸 알고 계신 가요?
예를 들면

이러한 요소에 부모요소에 margin-left: -100%; 를 주게 된다면
해당 자식 요소에 크기가 증가하게 됩니다.
왜 그럴 까요?
이렇게 되는 경우는 두 가지가 있는 데
첫 째는 이런 경우는 해당 요소에 자식 요소가 width를 먹은 display:block; 이었을 때
둘 째는 그러한 요소이며 padding으로 좌우 간격을 조절한 경우 입니다.

마진 같은 경우 여백을 띄우는 경우에 사용하게 되는 데 이 반대 경우인 -를 사용하게 될 경우

반대로 안쪽 여백이 늘어나게 되니 width의 크기가 넓어지게 됩니다.
즉 이러한 margin: - 에 사용은 꼭 필요한 경우가 아니라면 사용하지 않는 것을 추천을 드립니다.
물론 꼭 필요할 때는 사용해야 한다고 생각하지만 별로 좋지는 않은 방법인거 같아요.
오늘은 이걸로 끝!!
듀-바

profile
IT 삶을 사는 쿠키

0개의 댓글