CSS3 국경 - 간격 속성을 기준으로 측정

을하지 않습니다 여기에 문제는 다음과 같습니다CSS3 국경 - 간격 속성을 기준으로 측정

<html> 
<head> 
<style> 
#container{ 
    width:500px; 
    background-color:#ff0000; 
    border-collapse:separate; 
    border-spacing:20%; 
} 

#child{ 
    display:table-cell; 
    background-color:#00ff00; 
} 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="child"> 
     X 
    </div> 
</div> 
</body> 
</html>

그리고 jsfiddle으로합니다.

border-spacing은 유효한 인수로 백분율을 사용하지 않으려 고합니다. 국경 간격을 px으로 변경하면 어떻게되는지 알 수 있습니다. 왜 안돼? 신축성있는/뾰족한 경계 간격을 얻을 수있는 방법이 있습니까? 컨텍스트는 다른 측정의 대부분이 상대적으로 정의되는 명백하게 더 복잡한 프로젝트이므로이 절대 측정을 사용하면 창이 변경 될 때 상자가 정렬 상태를 유지하지 못하게됩니다.

나는 모든 것을 절대적으로 만들 수 있다는 것을 알고 있지만 적절하게 스트레칭/스킬을 원합니다.

출처

2011-02-11 Seamus

을 w3 사양으로 알려 주면 길이 값 (예 : px, em 등)을 사용하고 비율은 사용하지 않습니다. 더 많은 정보 http://www.w3.org/TR/CSS2/tables.html#propdef-border-spacing 길이에 대한

더 많은 정보 : 백분율 단위에 대한 http://www.w3.org/TR/CSS2/syndata.html#value-def-length

더 많은 정보 : http://www.w3.org/TR/CSS2/syndata.html#percentage-units 티리스 '대답에 명시된 바와 같이

출처

2011-02-11 19:51:48 Sotiris

상대적인 경계 간격 효과를 얻을 수있는 방법이 있습니까? – Seamus

상대 단위를 사용할 수 있습니다. 'vw','vh','vmin', ... 단위는 뷰포트의'width','height','min (width, height)'에 상대적입니다 :'1vw = 0.01 * width_of_viewport'. Firefox 34에서는 작동하지만 iOS7에서는 작동하지 않습니다. –

, 비율은 작동하지 않습니다. 하지만 자바 스크립트 나 jquery ("onresize"에서 호출되는 함수 안에서 수행)를 통해 수학에서 상대 값이 될 수있는 테두리 간격 값을 변경할 수 있습니다.

출처

2013-08-19 22:18:31 Adam

CSS3 국경 - 간격 속성을 기준으로 측정

답변

관련 문제