Как создать квадраты размера, который я хочу?

Мне немного стыдно, это должно быть просто, но я просто не понимаю, как это сделать ... ;-)Как создать квадраты размера, который я хочу?

Я просто хочу создать квадраты с внешним размером 40x40 и внутренним отступом/краем of 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

Что именно вывод и что вы хотите знать, сначала добавьте границы в свою коробку, чтобы увидеть, что на самом деле происходит, например, граница: 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'. Поэтому вы должны установить размеры (будь то 'min-width' или' width'/'min-height' или' height'). Я не знаю технических подходов, поскольку это из первых рук на протяжении многих лет. – ssell

Настоящая причина, по которой я спрашивал об этом, заключалась в том, что я иногда использовал «width: 100%» в div, включенном в другой. Если первый (внутренний) 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 Chrome или Firefox. Какой браузер вы используете, @Jack? – Leo

@Leo - Я использую Chrome. Что именно вы подразумеваете под словом «не работает»? –

Спасибо @Jack. Я имею в виду, что размер внутреннего пролета становится 0x0. Разве это не так? – Leo

Как создать квадраты размера, который я хочу?

ответ

Смежные вопросы