为什么 span.details 中的边距不起作用？

Question

span.details中的字不在a.prod的中心-买和 a.prod_details，我想把 add to cart 和 book info 和 span.details 中的 margin:2px 0 0 2px; 稍微移动一下。
为什么它不能工作？

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 1

将 display: inline-block 添加到跨度的 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>

Answer 2

将 padding-left 添加到跨度以移动文本 2px。

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;
    padding-left: 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>

为什么 span.details 中的边距不起作用？

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

html

css

margin