CSS Layout - width and max-width

Using width, max-width and margin: auto;

As mentioned in the previous chapter; a block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Setting the width of a block-level element will prevent it from stretching out to the edges of its container. Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins:

 

max-width 그리고 margin:auto 를 사용하기

 

이전 챕터에서 언급했다시피, block-level 요소는 항상 이용가능한 전체의 넓이 를 차지한다.

block-level 요소의 넓이를 설정하는 것은 이 컨테이너의 모서리가 뻗어가는걸 막기 위함이다?

그런다음 너는 margin을 auto로 설정할 수 있다. 이 컨타이너 안에 요소가 수평적으로 중앙에 오기위해?

요소는 명시된 넓이를 차지할 것이고, 남아있는 공간은 두개의 마진으로 동일하게 분할될 것이다.

 

Note: The problem with the <div> above occurs when the browser window is smaller than the width of the element. The browser then adds a horizontal scrollbar to the page.

 

주의 : 위의 <div>의 문제는 브라우저의 창이 요소의 넓이보다 작을때, 발생한다.

그러면, 브라우저의 수평 스크롤바를 추가하라.

 

Using max-width instead, in this situation, will improve the browser's handling of small windows. This is important when making a site usable on small devices:

 

이러한 상황에서 max-width를 사용하는 것은 브라우저의 작은 창을 조절하는 것을 향상시킨다.

작은 디바이스에서 사용하는 사이트를 만들때, 이것은 중요하다.