[CSS] Shopify Mobilia 테마의 미스터리 마진 / 패딩

귀하의 코드를 살펴본 결과

div.container {
    margin: 0 auto;
        padding: 20px 0;
        }
        

이제 margin:0 auto신비한 방식으로 작동합니다. 기본적으로 적용되는 요소를 수평으로 정렬하고 양쪽에 동일한 여백을 남겨 둡니다. 원래 너비는 1080px이지만 이제 페이지의 너비는 960px에 불과합니다 (아래 참조).

@media only screen and (max-width: 1199px) and (min-width: 960px)
.container {
    position: relative;
        width: 960px;
            margin: 0 auto;
                padding: 0;
                }
                

그래서 그것은 우리에게 1080-960 = 120px로 남겨 둡니다. 그래서 기본적으로 오른쪽과 왼쪽에 60px 60px 여백이 있고 또한 자식 컨테이너의 .container길이는 940px에 불과하고 가운데 정렬이 없기 때문에 나머지 20 개는 오른쪽 공간에 추가됩니다. 양쪽에 60px 및 80px 여백, 도움이 되었기를 바랍니다 (아래 참조).

container .sixteen.columns {
    width: 940px;
    }
    

출처
https://stackoverflow.com/questions/39929995