margin-bottom не работает в этом случае

Код ниже показывает две ссылки в div с малой шириной.margin-bottom не работает в этом случае

<style> 
div{ 
width: 89.5px; 
border:1px solid #ddd; 
} 

a{ 
    border:1px solid red; 
    display: inline; 

    margin-bottom:30px; 
} 
</style> 
<div> 
<a href="#">AAAAAAA</a> 
<a href="#">BBBBBBBB</a> 
</div>

Любые идеи, почему margin-bottom:30px; не работает так, что одна кнопка будет ниже другой в течение примерно 30px?

Что является лучшим способом для слегка изменить этот код, так что есть пробел между кнопками?

И вот jsFiddle при необходимости. Спасибо.

источник

2015-02-03 Haradzieniec

Внутренние элементы не могут иметь поля.

Если вам нужно добавить к себе ссылку, вам необходимо сделать это по ссылке block, или inline-block. Здесь вам нужен inline-block.

a {display: inline-block}

При установке там block, маржа будет apllied и ширина ссылка будет 100% (или лучше, 100% - side margins - paddings - borders).

Примечание: вы установили display: inline, которые ничего не делают в этом случае. Ссылки по умолчанию: inline.

источник

2015-02-03 16:30:45 panther

'inline-block' лучше, если вы хотите сохранить« не полную ширину »вещь, которую' inline' дает вам, имея возможность использовать поля, которые могут иметь только 'block'. –

@NiettheDarkAbsol: Я обновил свой ответ, когда вы написали комментарий, я только что закончил обновление. Но, спасибо :-) – panther

BTW, встроенные ящики могут иметь горизонтальные поля, но не вертикальные – user3790069

Я вижу проблему, и это потому, что вы используете display: inline, а не display: block.

a{ 
    border:1px solid red; 
    display: block; 

    margin-bottom:30px; 
}

источник

2015-02-03 16:30:37

Между 'block' и' inline-block' существует другое поведение. 'Inline-block' лучше в этом случае. OP объявляет 'display: inline', что означает ширину _set, поскольку текст является широким, а не 100% _. – panther

Это не сработает, если у вас есть значение display:inline.

вы должны изменить значение display на display:block; или display:inline-block.

источник

2015-02-03 16:31:15 alonkol

margin-bottom не работает в этом случае

ответ

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