너비가 100 % 일 때 상대 위치 지정으로 내용이 가장자리로 바뀌지 않습니다.

Question

저는이 문제에 여러 번 직면 해 있으며 물어보기로했습니다. width:100%으로 상대 위치 지정을 사용하면 내용이 화면 가장자리로 이동하지 않습니다. 반면에 절대 또는 고정 위치를 사용하면 콘텐츠가 가장자리로 이동합니다. 왜 이런거야? 여기에 내 문제를 보여주는 샘플 코드입니다 :

#container { 
 
    display: block; 
 
    width: 100%; 
 
    position: relative; 
 
    height: 150px; 
 
    border: 1px solid; 
 
    text-align: center; 
 
}

<div id='container'> 
 
    <br /> 
 
    <br />^ 
 
    <br /> 
 
    <- Why do I have these spaces? -> 
 
    <br />\/ 
 
</div>

결과 :

내가 원하는 무엇 : 인터넷 검색을하는 동안 이

, 내가 this page 건너 않았지만, 이 문제는 text-align: center을 적용하지 않아서 발생한 것 같습니다.

Answer 1

기본값 인 body 여백/패딩을 재설정해야합니다.

box-sizing: border-box; 또한 너비 계산에 테두리 크기를 포함하는 데 도움이됩니다.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    display: block; 
 
    width: 100%; 
 
    position: relative; 
 
    height: 150px; 
 
    border: 1px solid; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
}

<div id='container'> 
 
    <br /> 
 
    <br />^ 
 
    <br /> 
 
    <- Why do I have these spaces? -> 
 
    <br />\/ 
 
</div>

참조 : body Typical default display properties-box-sizing

Answer 2

나는 두 번째 임마누엘의 반응, 그리고 궁극적 대답은 CSS 리셋 모든 기본 스타일을 취소하는 것입니다 : http://meyerweb.com/eric/tools/css/reset/

당신 왜 거기에 여백과 패딩에 0이 아닌 값이 있는지에 대한 의견을 묻습니다. 폰트 크기 및 표제의 가중치, 목록 스타일 유형 등과 같은 브라우저에는 기본적으로 많은 스타일이 있습니다.

브라우저는 항상 이러한 기본 스타일을 정확하게 렌더링하지는 않습니다. 이를 극복하기 위해 많은 사람들이 모든 기본 스타일을 지우는 CSS 재설정 (위에있는 Eric Meyer의 버전이 표준입니다)을 사용하고 있습니다. 그러나 처음 두 번 조심하십시오. 이 실제로 없으므로이 작업을 수행하십시오. 즉, ul 태그에는 패딩이없고, 패딩이 없으며 ol 항목에는 숫자가 없습니다.