너비, 최대너비와 margin:auto;

블록레벨 요소는 항상 사용할 수 있는 전체 너비를 사용합니다.

블록레벨 요소에 width속성을 사용하면 해당 요소의 가장자리까지 확장되지 않습니다. 그런 다음 margin을 auto로 설정하면 요소를 해당 컨테이너의 가로 가운데 위치할 수 있습니다. 요소는 지정된 너비를 차지하며 나머지 공간은 두 여백 사이에서 균등하게 분할합니다.

** <div>을 사용하여 이렇게 한 경우의 문제는 브라우저 윈도우가 요소 너비보다 작은 경우 발생합니다. 그럴 경우 브라우저는 가로 스크롤 막대를 페이지에 추가합니다.

max-width속성을 사용하면 이런 상황에서 가로 스크롤이 발생하지 않고 작은 창 브라우저의 취급이 개선됩니다. 소형 미디어에서 사이트를 사용할 수 있게 만들 때 중요합니다.

div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}