[CSS] 마진상쇄 해결방법

✍️ 작성

.main {
   background-color: whitesmoke;
   width: 80%;
   margin: auto;
   text-align: center;
     }
 h3 {
   margin-top: 30px;
    }

위와 같이 작성했을때,

💻 출력

글자는 margin값이 적용되지 않은 것을 확인 할 수 있다.
부모 태그인 main의 margin:auto에 상쇄되어 작동하지 않는것인데 이럴때는
부모태그에display:display: inline-block를 작성해주면 된다.

✍️ 작성

.main {
    background-color: whitesmoke;
    width: 80%;
    margin: auto;
    text-align: center;
    border-radius: 70px;
    display: inline-block;
}

💻 출력

마진상쇄현상이 해결되고 text에 margin-top:30px이 적용되어 공간이 생긴 것을 확인 할 수 있다.

마진상쇄 현상을 해결하는 방법은 다양하지만 이 방법이 제일 간단한 것 같다 🪄