현상

Css reset을 위해 meyerweb reset css code를 사용하면 <li> tag들이 indent가 하나도 되어 있지 않다.

indent를 만들어주기 위해서 아래 스타일을 적용하면

li {
  padding-left: 1em;
}

list에 indent는 생기지만 브라우저의 x축으로 스크롤이 생기게 된다. 디버그 모드에서 요소검사를 해보면 <li> 태그의 width가 100%를 넘기 때문인데 이는 list의 width 100%와 padding-left가 더해졌기 때문이다.

이를 해결하기 위해 기존 width 값을 계산할 때 padding값도 포함한 값으로 변경해주는 속성을 적용해야 한다. 해당 속성은 css3에서 box-sizing이며 아래와 같이 속성을 추가한다.

• Mozilla ref

li {
  padding-left: 1em;
  box-sizing: border-box;
}