Подтвердить что ты не робот

Margin-bottom не работает

У меня возникла неприятная проблема, когда я пытаюсь установить стиль по ссылке, чтобы она всегда отображалась на 10 пикселей со дна коробки, в которой она находится. По какой-то причине стиль нижнего края, который я применил к он не работает... странно, что маржа-верхушка, margin-right и margin-left все работают, но когда я кладу margin-bottom, он не регистрируется.

Я уверен, что это, вероятно, что-то глупое, которого я пропущу, но я слишком долго пытался его выяснить и попробовать разные комбо, но, похоже, не может заставить его работать!

Я пробовал применить стиль класса непосредственно к тегу ссылки, а также обернуть день абзаца вокруг ссылки и применить к нему класс. Метод абзаца работает так, что он позиционирует его вправо, как я хочу, но опять же он не применяет мое поле-снизу: 10px;

Любые идеи относительно того, что я делаю неправильно?

Ниже приведены фрагменты html для полей, а также CSS, который я использую. Любые мысли/предложения были бы очень благодарны!

Спасибо!

HTML:

   <div id="boxes" class="container">
        <div class="box" id="box1">
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat. </p>
            <a href="#" class="c2action">link</a>
        </div><!--box1-->

        <div class="box" id="box2">
            <h2>Heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac viverra orci. Etiam volutpat lectus vitae tellus blandit volutpat. Maecenas ante quam, scelerisque et tempor ac, varius id eros. Integer hendrerit pretium feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            <p class="c2a"><a href="#">link</a></p>
        </div><!--box2-->

CSS





     html, body, div, span, applet, object, iframe,  
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
    a, abbr, acronym, address, big, cite, code,  
    del, dfn, em, font, img, ins, kbd, q, s, samp,  
    small, strike, strong, sub, sup, tt, var,  
    b, u, i, center,  
    dl, dt, dd, ol, ul, li,  
    fieldset, form, label, legend,  
    table, caption, tbody, tfoot, thead, tr, th, td {  
        margin: 0;  
        padding: 0;  
        border: 0;  
        outline: 0;  
        font-size: 100%;  
        vertical-align: baseline;  
        background: transparent;  
    }  

    body {background: #FFFFFF; font-family: Arial, verdana, sans-serif;}

    .container {margin: 0 auto; width: 940px;}



    .box{
        width:296px;
        height:270px;
        float:left;
        background-color:#ebe1bf;
        margin-top: 20px;
        border-style: solid;
        border-width: 2px;
        border-color: #e0d6b2;
    }

    .box h2{
        font-size: 16px;
        margin-top: 18px;
        margin-left: 24px;
        color: #353535; 
    }

    .box p{
        margin-top: 10px;
        margin-left: 24px;
        width: 252px;
        font-size:13px;
        color:#525151;
    }

    p.c2a{
        text-align:right;
        margin-bottom:10px;
        font-size: 14px;
        color:#00FF00;
    }

    .c2action a {
        text-align:right;
        margin-bottom:10px;
        font-size: 14px;
        color:#FF0000;
    }

    #box1{

        margin-right: 20px;
    }

    #box2{
        margin-right: 20px;
    }
4b9b3361

ОТВЕТЫ

Ответ 1

Дайте содержащую коробку position:relative; и дайте ссылки position:absolute; bottom:10px; right:20px. См. http://jsfiddle.net/Ltnmv/.

Ответ 2

Ваша проблема в том, что ссылка ( "a" ) является элементом INLINE, и вы не можете установить маржу для встроенных элементов. Чтобы заставить его работать, вы должны объявить его как элемент BLOCK, добавив:

 a{
  display: block;
 }

однако будьте внимательны, тогда он будет зарезервирован как полная ширина по умолчанию. Возможно, вы захотите позже добавить что-то вроде

 a{
  float: left;
  margin-left: 3px;
 }

Если вы это сделаете, вы можете удалить дисплей: block; потому что устанавливая float: left; вы уже объявляете его как элемент блока

В вашем конкретном примере вам может потребоваться простое дополнение для вашего родительского элемента "p". Возможны оба подхода (настройка отображения: блок или настройка), однако второй является более элегантным. Вам действительно не нужно блокировать элемент. Обычно вы используете первый подход, когда хотите создать изображение ссылки.

Ответ 4

Единственное, что вы использовали, было

  • p.c2a, который является последним фрагментом HTML, поэтому вы ничего не увидите и

  • .c2action a, который применим только к элементам a в элементах с классами c2action, но их нет.

Ответ 5

Попробуйте изменить класс box следующим образом:

.box{
    width:296px;
    float:left;
    background-color:#ebe1bf;
    margin-top: 20px;
    border-style: solid;
    border-width: 2px;
    border-color: #e0d6b2;
    padding-bottom:10px;
}

Маржа возникает за пределами фона, тогда как заполнение происходит внутри - поэтому имеет смысл добавить его в класс .box и удалить его из других элементов внутри поля.

Вы даже можете просто добавить прописку: 18px 24px 10px 24px; на .box и удалить все остальные поля из h2 и p элементов в безопасное кодирование.

Мир!