css – margin-bottom不行

前端之家收集整理的这篇文章主要介绍了css – margin-bottom不行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个令人沮丧的问题,我想在一个链接上设置一个风格,所以它总是从框的底部出现10px。由于某种原因,我应用的边缘底部样式不是工作…奇怪的是,边际保证金,边际权利和保证金左边所有工作,但是当我把margin-bottom它没有注册

我确定这可能是我失踪的愚蠢的东西,但是我花了太长时间想弄清楚它并尝试了不同的组合,但似乎无法让它工作!

我已经尝试将类样式直接应用于链接标签,并且在链接周围包含一个段落日,并将类应用到它。段落方法的作用在于它将其定位到我想要的右侧,但是再次没有应用我的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,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;
    }

解决方法

给包装盒位置:相对;给予链接位置:绝对;底部:10px的;右:20像素。见 http://jsfiddle.net/Ltnmv/

猜你在找的CSS相关文章