이 질문이 이미 stackoverflow에 명시된 경우 저를 수정하십시오! 이 경우 나는 사랑스러운 사과하지만 난 잠시 동안 찾아 봤는데 만 발견 괜찮나 없는 이유들 .
내 질문은 이것이다 : 부모 div { display: inline-block; }는 지정 되지 않는 한 페이지의 전체 너비를 자동으로 차지하는 것 같습니다 . 지정되면 자식 요소의 너비에 따라 너비를 조정합니다. 이것은 정말 유용하지만 왜 이런 일이 발생 하는지 아는 것이 중요하다고 생각합니다 . 다음은 시각적 표현을위한 코드입니다. 미리 감사드립니다!
편집 : 일부 사람들이 내 질문을 중복으로 표시했지만 다른 질문에서 디스플레이 인라인 블록이 어린이의 높이와 너비에 자동으로 조정되는 이유를 설명하는 곳을 보여주세요. 감사합니다!
#wrapper {
border: 1px solid black;
display: inline-block;
}
#child_div {
height: 100px;
width: 100px;
border: 1px solid black;
margin: 10px;
}<div id="wrapper">
<div id="child_div"></div>
</div>display: inline-block사이의 달콤한 자리 기본적으로 display: inline;(의 기본이다 span, strong, em, 등) display: block;(의 기본이다 div, p등).
인라인 요소는 텍스트 용으로 만들어 졌으므로 텍스트와 함께 인라인되어야하며 포함 된 텍스트만큼 넓어야합니다. 따라서 inline요소 의 너비를 설정할 수 없습니다 .
블록 요소는 기본적으로 사용 가능한 모든 너비를 채우도록 만들어져 있으므로 인라인으로 흐르는 대신 자체 라인에 있습니다. 이것은 단락과 같은 것에 적합하지만 때로는 더 짧은 줄을 원하여 block요소 의 너비를 조정할 수 있습니다 .
인라인 블록 요소는 중간에 있습니다. display: inline;요소 처럼 인라인으로 흐르지 만 display: block;요소 처럼 너비를 설정할 수 있습니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다