it_is_a_literature it_is_a_literature - 7 months ago 10
HTML Question

Why the margin in span.details can't work?

The words in the span.details is not in the center of a.prod-buy and
a.prod_details ,i want to move the words

add to cart
and
book info
a little with
margin:2px 0 0 2px;
in span.details.

why it can't work?



div.center_prod_box {
border:1px dashed black;
float:left;
width:173px;
height:auto;
text-align:center;
}

span.reduce {
text-decoration:line-through;
}

div.prod_details_tab{
clear:both;
width:180;
height:40px;
border:1px solid red;
}

a.prod_buy,a.prod_details {
width:75px;
height:24px;
background:url(images/link_bg.gif) no-repeat center;
font-size:12px;
margin:10px 10px 0 0;
dispaly:block;
float:left;
border:1px solid red;
}

span.details {
border:1px solid red;
margin:2px 0 0 2px;
}

<html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<div class="prod_box">
<div class="center_prod_box">
<div class="product_title">
<p>book name</p>
</div>
<div class="product_img">
<img src="images/book1.jpg" />
</div>
<div class="prod_price">
<span class="reduce">&yen;36</span> <span class="price">&yen;31</span>
</div>
</div>
<div class="prod_details_tab">
<a class="prod_buy">
<span class="details">add to cart</span>
</a>
<a class="prod_details">
<span class="details">book info</span>
</a>
</div>
</div>
</body>
</html>




Answer

Add display: inline-block to span's CSS.

div.center_prod_box {
    border:1px dashed black;
    float:left;
    width:173px;
    height:auto;
    text-align:center;
    }

span.reduce {
    text-decoration:line-through;
    }

div.prod_details_tab{
    clear:both;
    width:180;
    height:40px;
    border:1px solid red; 
    }

a.prod_buy,a.prod_details {
    width:75px;
    height:24px;
    background:url(images/link_bg.gif) no-repeat center;   
    font-size:12px;
    margin:10px 10px 0 0;
    dispaly:block;
    float:left;
    border:1px solid red;
    }

span.details {
    display: inline-block;
    border:1px solid red;
    margin:2px 0 0 2px;
    }
<html>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <body>
        <div class="prod_box">
            <div class="center_prod_box">
                <div class="product_title">
                    <p>book name</p>
                </div>
                <div class="product_img">
                    <img src="images/book1.jpg" />
                </div>
                <div class="prod_price">
                     <span class="reduce">&yen;36</span> <span class="price">&yen;31</span>
                </div>
            </div>
            <div class="prod_details_tab">
                <a class="prod_buy">
                    <span class="details">add to cart</span>
                </a>
                <a class="prod_details">
                    <span class="details">book info</span>
                </a>
            </div>
        </div>
    </body>
</html>

Comments