자동 너비와 너비 100 %의 차이

자동 너비와 너비 100 %의 차이

---

이전에는 너비 자동에 대한 내 가정이 내용이있는 것처럼 작동하지만 이제는 약간의 지식 만 있으면 블록 전체 너비처럼 작동합니다. 그래서 여기서 너비 100 %와 너비 자동을 혼동합니다. 누구든지 설명과 함께 이들의 차이점에 대해 설명해 주시겠습니까?

---

너비 자동

div 또는 p와 같은 블록 수준 요소의 초기 너비는 자동입니다. 이를 통해 컨테이너 블록 내에서 사용 가능한 모든 수평 공간을 차지하도록 확장됩니다. 가로 여백이나 테두리가 있으면 해당 너비가 요소의 전체 너비에 추가되지 않습니다.

너비 100 %

반면에 width : 100 %를 지정하면 요소의 전체 너비는 컨테이너 블록에 가로 여백, 패딩 및 테두리를 더한 100 %가됩니다 (box-sizing : border-box를 사용하지 않은 경우). 전체 너비가 계산되는 방식을 변경하기 위해 여백 만 100 %에 추가됩니다.) 이것은 당신이 원하는 것일 수 있지만 대부분 그렇지 않습니다.

차이점을 시각화하려면 다음 그림을 참조하십시오.

출처

---

• width: auto; 여백, 패딩 또는 테두리에서 추가 공간이 추가 될 때 요소를 부모 컨테이너와 동일한 너비로 유지하기 위해 최대한 노력합니다.

• width: 100%;요소를 부모 컨테이너만큼 넓게 만듭니다. 부모에 관계없이 요소의 크기에 추가 간격이 추가됩니다. 이로 인해 일반적으로 문제가 발생합니다.

---

It's about margins and border. If you use width: auto, then add border, your div won't become bigger than its container. On the other hand, if you use width: 100% and some border, the element's width will be 100% + border or margin. For more info see this.

---

As long as the value of width is auto, the element can have horizontal margin, padding and border without becoming wider than its container (unless of course the sum of margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right is larger than the container). The width of its content box will be whatever is left when the margin, padding and border have been subtracted from the container’s width.

On the other hand, if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border (unless you’ve used box-sizing:border-box, in which case only margins are added to the 100% to change how its total width is calculated). This may be what you want, but most likely it isn’t.

Source:

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

---

The initial width of a block level element like div or p is auto.

Use width:auto to undo explicitly specified widths.

if you specify width:100%, the element’s total width will be 100% of its containing block plus any horizontal margin, padding and border.

So, next time you find yourself setting the width of a block level element to 100% to make it occupy all available width, consider if what you really want is setting it to auto.

---

Using width:auto; + display:inline-block; in css giving awesome effect.

width : auto;
display: inline-block;

---

Width 100% : It will make content with 100%. margin, border, padding will be added to this width and element will overflow if any of these added.

Width auto : It will fit the element in available space including margin, border and padding. space remaining after adjusting margin + padding + border will be available width/ height.

Width 100% + box-sizing: border box : It will also fits the element in available space including border, padding (margin will make it overflow the container).

참고 URL : https://stackoverflow.com/questions/17468733/difference-between-width-auto-and-width-100-percent