원하는 크기의 사각형을 만들려면 어떻게해야합니까?

조금 부끄러움을 느낀다. 간단해야한다. 그러나 나는 단지 그것을하는 법을 이해하지 못한다. ;-)원하는 크기의 사각형을 만들려면 어떻게해야합니까?

단지 외부 크기 40x40과 안쪽 여백/여백으로 사각형을 만들고 싶다. 2px 그래서 이것을 시도 :

<span class="square-row"> 
    <span style="width:40px; height:40px; display:inline-block;"> 
    <span style="margin:2px; display:inline-block;"> </span> 
    </span> 

    ...

나는 원하는 크기로 사각형을 얻지 만 내부 사각형은 단지 붕괴되어 0x0가된다.

"내부"사각형이있는 이유는 다른 배경색을 가져야한다는 것입니다.

어떻게하면됩니까?

업데이트 : 네, 내부 사각형에 특정 높이와 너비를 설정하여 할 수 있습니다. 이 경우 작동하지만 어떻게 작동하는지 이해하고 싶었습니다.

출처

2012-02-03 Leo

정확히 무엇을 출력하고 무엇을 알고 싶은지, 먼저 상자에 테두리를 추가하여 실제 일어나고있는 것을 확인하십시오. 예 : border : 1px solid; –

@Xufyan : 대신 대비되는 배경을 사용해야합니다. 테두리는 요소의 너비를 변경합니다. – animuson

대조적 인 배경을 사용하고 있습니다. 하지만 내부 사각형의 크기는 0x0입니다. (나는 그것을 볼 수 없으며 Firebug는 크기가 0x0이라고 알려줍니다.) – Leo

당신이 찾고있는 것은이 중 하나입니까?

http://jsfiddle.net/HrtsX/

하지 않으면, 당신은 당신이 원하는 무엇의 사진을 추가 할 수 있습니다?

편집 : animuson이 말했듯이 여백은 요소의 외부에 적용되는 반면 패딩은 내부에 영향을줍니다. http://www.goer.org/HTML/intermediate/margins_and_padding/

출처

2012-02-03 18:58:46 ssell

감사합니다. 당연히 그렇게 할 수 있습니다. ;-) 내가 정말로 원하는 것은 "자동"이 내가 원하는 것을하지 않는 이유였습니다. 이것은 이것을 묻는 나쁜 예 였지만 누군가가 대답을 알고 있으면 기꺼이 알게되었습니다. :-) – Leo

요소에 대해 설정된 특정 치수가 있어야합니다. 그렇지 않으면 가능한 한 작은 공간을 차지합니다. 이 경우 내용이없는 곳에서는'0x0'을 사용하게됩니다. 따라서 치수를 설정해야합니다 ('최소 너비'또는 '너비/최소 높이'또는 '높이'여부). 나는 수년에 걸친 직접 경험에서 왔기 때문에 기술적 인 근거는 모른다. – ssell

내가 물어 본 진짜 이유는 다른 사람이 포함 된 div에서 "width : 100 %"를 사용하기도했습니다. 첫 번째 (내부) div에 테두리가있는 경우 외부 div의 공간을 오버플로합니다. 그런 다음 "width : auto; margin : 0"을 사용하는 사람을 보았습니다. 저기서 일했는데, 모르겠다는 이유가 여기에 없습니다. – Leo

여백은 외부 외부에 적용됩니다. 안쪽에 네모를 적용하려면 패딩을 사용해야합니다.

출처

2012-02-03 18:58:59 animuson

예, 대신 내부 스팬을 사용했습니다. (비록 여기서는별로 유용하지 않습니다.) – Leo

It seems to work for me. 내가 사각형을 볼 수 있도록 배경색을 빨간색으로 변경했습니다.

출처

2012-02-03 18:59:40

고마워요. Google 크롬 또는 Firefox에서 나에게 적합하지 않습니다. 무슨 브라우저를 쓰고 있니, 잭? – Leo

@Leo - Chrome을 사용하고 있습니다. 정확하게, "작동하지 않는다"는 의미입니까? –

고마워요. @ 잭. 내부 범위의 크기가 0x0이된다는 뜻입니다. 그게 너 한테 일어난 일 아닌가? – Leo

원하는 크기의 사각형을 만들려면 어떻게해야합니까?

답변

관련 문제