Почему маржа в span.details не может работать?

Слова в span.details не находятся в центре a.prod-buy и a.prod_details, я хочу переместить слова add to cart и book info немного с margin:2px 0 0 2px; в span.details.
Почему он не может работать?Почему маржа в span.details не может работать?

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>

источник

2016-04-23 it_is_a_literature

Ну первый от него бы помочь правописание свойства CSS правильно. Таким образом 'dispaly: block;' должен быть 'display: block;' –

Пролет внутри якоря, почему бы не просто создать привязку с добавленным дополнением? –

Добавить 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>

источник

2016-04-23 03:17:34 Harish

Добавить 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>

источник

2016-04-23 03:39:42

Почему маржа в span.details не может работать?

ответ

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