어, margin: 0 auto; 0 필요하지 않습니까?

2251 단어 HTMLCSS작은 재료

좌우 중앙 정렬이 목적이라면 필요하지 않는 경우가 많다



아마 여러분이 margin: 0 auto; 라고 기술할 때, 머리안에서는 「요소를 좌우 중앙에 배치하고 싶다」라고 생각하고 있는 것은 아닐까요?

그런데 그 목적이면 기사 타이틀에 쓴 것처럼 margin: auto; 로 부족하다(경우가 많다) 것입니다.

우선 보는 것이 빠르다고 생각하기 때문에, 아래에 margin: 0 auto;와 margin: auto;를 나란히 해 보았습니다.

See the Pen KKNNxjW by Keisuke Watanuki ( @xrxoxcxox )
on CodePen.


윈도우 사이즈를 바꾸어 봐 주시면 알 수 있다고 생각합니다만 margin: auto; 하지만 문제 없게 좌우의 중앙에 배치되고 있습니다.



왜?



margin: auto; 는 margin: auto auto auto auto; 라고 쓴 것과 같게 되어, 상하의 margin 도 auto 취급이 됩니다.



따라서 결과적으로 0를 빼면 좌우 중앙에 배치됩니다.



참고에 MDN Web Docs의 margin 사양 링크을 붙여 둡니다.



※ 코멘트란에서 지적해 주신 거리 , 기재 내용이 잘못되었기 때문에 수정했습니다.



반대로 0이 필요한 장면은?



솔직히 그렇게 떠오르지 않았습니다.



비교적 억지로 꼬인다면



  • 리셋 시스템의 CSS를 대지 않고, 단지 div에도 브라우저 고유의 마진이 맞아 버린다
  • .someClass > div { margin-top: 24px; } 등의 지정이 있어, 계승해 버리기 때문에 0로 덮어쓰지 않으면 안 된다


그럼 0은 어디에서 왔니?



죄송합니다. 확실하지 않습니다.

앞서 소개한 MDN Web Docs 중에서도 아래와 같이 기재되어 있습니다.




최근 브라우저에서 무언가를 가운데 정렬하려면 display: flex; justify-content: center; 를 사용할 수 있습니다.



그러나 IE8-9와 같은 오래된 브라우저는 플렉스 박스 레이아웃을 지원하지 않으므로 사용할 수 없습니다. 부모 요소 내에서 요소를 가운데 정렬하려면 margin: 0 auto; 를 사용하십시오.




당시의 브라우저의 문제였는지, CSS의 사양이 바뀌었는지…



아는 사람이 있다면 의견으로 알려 주시면 감사하겠습니다


URL 매개변수의 변조 감지
Enum x Dictionary의 인텔리센스가 효과가 없습니까? 【Python】

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage