[CSS] width:100%와 width:auto의 차이

개시하다

질문을 받았을 때 단번에 대답하지 못해서 기사로 정리했어요!

100%란?

※ border-box가 아니라는 전제로 화제 추진
width는padding과border를 포함하지 않습니다
width의 너비 지정에padding과border가 포함되지 않기 때문에 HTML의 하위 요소에width:100%를 지정한 후에padding과border를 지정하면 하위 요소가 부모 요소에서 넘쳐 화면에 나타납니다

샘플 코드

<div class='parent'>
 <div class='children'>children</div>
</div>

.parent {
  width: 400px;
  height: 200px;
  background-color: red;
}

.children {
  width: 100%;
  height: 150px;
  border: 10px solid blue;
  background-color: yellow;
}

설계

무엇

width에padding과border 포함
width의 너비 지정은padding과border를 포함하기 때문에 HTML의 하위 요소에 width:auto를 지정한 후,padding이나border를 지정해도 하위 요소는 부모 요소를 초과하지 않고 화면에 나타납니다

샘플 코드

<div class='parent'>
 <div class='children'>children</div>
</div>

.parent {
  width: 400px;
  height: 200px;
  background-color: red;
}

.children {
  width: auto;
  height: 150px;
  border: 10px solid blue;
  background-color: yellow;
}

설계

자 요소는 부 요소를 초과하여 표시하지 않는다

결론

100%를 지정하면 width에padding과border가 포함되지 않습니다
width 지정: auto 시 width에padding과border 포함