저는 CSS에 대해 꽤 잘 알고 있다고 생각했지만 간단한 문제로 인해 당황 스럽습니다.span을 포함하는 간단한 div가 정확히 크기가 맞지 않습니다
< DIV 스팬 패딩을 가지면 범위의 높이보다 작게되는 DIV의 높이 > < 스팬 > 샘플 텍스트 </스팬 > </DIV >
결과.
"float"을 사용하여 div 크기를 올바르게 만드는 방법이 있다는 것을 알고 있지만 부유물은 항상 원하지 않는 부작용을 일으키는 것처럼 보입니다.
div의 내용에 맞게 div에 알리는 간단한 방법이 없습니까? 나에게 꽤 기초적인 것 같다. 어쩌면 내가 뭔가를 놓친 것 같아.
기본 경우에는 display: inline-block을 스팬에 사용하십시오. 여기
<!DOCTYPE HTML>
<html>
<head>
<title>Span padding test</title>
</head>
<body>
<div style="background-color: yellow; border: 1px solid red;">
<span style="padding: 50px; display: inline-block;">test</span>
</div>
</body>
</html>
이유 왜 인라인 요소를 부동 암시 적으로 변환되기 때문에 사업부 및 범위 수정에 float: left 추가 블록 요소에. div와 span 사이의 차이 (일명 블록 및 인라인 요소의 차이)에 익숙하지 않은 경우 http://www.maxdesign.com.au/articles/inline/을 읽는 것이 도움이됩니다.
이 문제를 해결할 수있는 몇 가지 방법이 있지만 나머지 마크 업과 스타일에 대해 알지 못하면 어느 것이 가장 적합하다고 말할 수 없습니다.
참고 : 디스플레이 : 인라인 블록은 IE6에서 작동하지 않습니다. 오버플로 : 부모 div의 자동으로 문제를 해결하고 심지어 IE6에서 작동합니다. – meo
span에 'display : block'을 사용하는 것이 하나의 해결책이지만, div (또는 적어도 가장 높은 요소)보다 큰 모든 것에 대해 수행해야하므로 매우 깨끗합니다. –
"CSS에 대해 꽤 잘 알고있다"... CSS를 이해하는 데있어 끝이 없다. 그리고 지금까지 상상할 수 있었던 것보다 적은 "단순한"문제가 있습니다. – Smandoli