요소의 너비에 상대적으로 패딩 하단입니까?

Question

패딩 하단은 엘리먼트의 너비와 관련이 있어야하지만 Chrome 및 Firefox의 마지막 버전에서 테스트되었으며 패딩 하단은 부모의 너비와 관련이 있습니다.

나는 요소의 폭에 요소 상대를 필요로하지만 작동하지 않습니다 http://dabblet.com/gist/6898263

내가 무엇을 할 수

width: 200px; 
padding-bottom: 50%; /* must be 100px */ 
height: 0; 

예를 참조하십시오?

Answer 1

가 아니, padding properties에, 비율이 여기에 아마 body 요소 또는 전혀 폭 세트와 div 요소 인 containing block의 폭을 기준으로, 그래서 그것이 가능한 폭을 차지합니다.

div 컨테이너에 요소를 래핑하고 컨테이너에 원하는 너비를 설정하면 의도 한대로 백분율을 사용할 수 있습니다.

Answer 2

width과 padding 속성 사이에는 연결이 없습니다. 그러나 둘 다 의존하는 세 번째 것이 있습니다. em 단위 (documentation)입니다. Em 단위는 폭, 경계 폭 등 모든 측정 가능한 속성을 정의하는 데 사용할 수 있으며 글꼴 크기에 따라 다릅니다 (이 경우는 px에 정의 됨). http://jsfiddle.net/Wgzrn/ :

font-size: 200px; 
width: 1em; 
padding-bottom: 0.5em; 

내 바이올린을 참조하십시오

당신은 이 간단한 해킹을 시도 할 수 있습니다. 당신의 예에서

당신은 여기에 문제가되지 않습니다 부모에 24px 그래서 200px 글꼴 크기에 정의 원하는 font-size와 안에 다른 div을 사용했다.

내 솔루션은별로 우아하지 않지만 다른 것은 알지 못합니다.

Answer 3

왜 래핑 된 div에 패딩과 배경색을 추가합니까? 다음 CSS로 요점의 CSS를 변경하면 100px 패딩이 생깁니다. 여기에 코드 :

div.aspect-ratio { 
    width: 200px; 
    height: 0; 
    position: relative; 
} 

div.aspect-ratio > div { 
    padding-bottom: 50%; /* must be 100px */ 
    position: absolute; 
    background: blue; 
    color: white; 
    font-size: 24px; 
    text-align: center; 
}