특정 element의 child가 parent의 margin을 무시하는 css

#button-box{

text-align: center;

float: left;

margin-bottom: 20px;

margin-left: 20px;

max-width: 80px;

}

부모가 위와 같은 css를 가지고 자식이 div이며 css가 없을 때

자식이 80px를 넘기게되면 부모 범위를 넘기게 된다.

이때 만약 margin까지 존재한다면 자식과 부모가 center하게 존재하지 못하게 된다.

이때의 해결방법으로는 부모의 css에 flex를 주며 flex-direction을 column으로하고 align-items를 center로 두자.

그럼 margin을 무시하며 자식이 부모의 중앙으로 위치하게 된다.

#button-box{

text-align: center;

float: left;

margin-bottom: 20px;

max-width: 80px;

align-items: center;

display: flex;

flex-direction: column;

}