如何在按鈕和邊框之間添加空間？

-2

enter image description here 如何在按鈕和邊框之間添加空間？

我有什麼是行和列的表格，這是兩行的圖片，我有一個邊界是不中斷地繼續，我做到了..而且每個TD有一個按鈕，我想什麼做的是垂直和水平添加空間，你可以在箭頭的圖像中看到..我的意思是在每個按鈕和按鈕的左側和右側，不影響邊框，這是我試過的：

HTML代碼：

<table> 
<tr> 
<td width="188px" class="button"><img src="b2.png" /></td> 

<td width="188px" class="button" ></td> 
<td width="188px" class="button" ></td> 
<td width="188px" class="button" ></td> 
<td width="188px" class="button" ><img src="b1.png" /></td> 
<td width="188px" class="button" ></td> 
</tr>

Css代碼：

.button { 
    width:180px; 
    text-align:center; 
    background:rgb(51,153,51); 
    position:relative; 
    overflow:hidden; 
    margin-top:3px; 
     margin-bottom:3px; 
     margin-left:1px; 
     margin-right:12px; 
    /* add this */ 
} 
.button a{ 
    display:block; 
    height:37px; 
    color:white; 
    line-height:100px; 
    text-decoration:none; 
    position:relative; 
    z-index:10; 
} 
.button:before { 
    content:" "; 
    display:block; 
    width:180px; 
    height:37px; 
    background:rgba(0,0,0,0.5); 
    position:absolute; 
    left:0; 
    top:100%; 
    transition:all 0.5s; 
} 
.button:hover:before { 
    top:0; 
} 

table td { 


    margin-top: 10px; 
    margin-bottom: 10px; 
    padding: 0px 0px 0px 0px; 
    border-left:1.0px solid #000; 
    border-right:1.0px solid #000; 
    border-spacing:5px; 
} 
table { 
    border-collapse: collapse; 

}

任何人都可以幫助我嗎？

來源

2014-07-07 user3675605

嘗試使用'padding'？ – TribalChief

是的，但按鈕保持拉伸，我也試過保證金，但沒有任何工作 – user3675605

你可以創建一個小提琴與您的問題？ –

-1

u能在.button和.button使用填充：之前提升高度由20px.Try這css..or參閱本link

.button { 
    width:180px; 
    text-align:center; 
    background:rgb(51, 153, 51); 
    position:relative; 
    overflow:hidden; 
    margin-top:3px; 
    margin-bottom:3px; 
    margin-left:1px; 
    margin-right:12px; 
    /* add this */ 
} 
.button a { 
    display:block; 
    height:37px; 
    color:white; 
    line-height:100px; 
    text-decoration:none; 
    position:relative; 
    z-index:10; 
    padding:10px; 
} 
.button:before { 
    content:" "; 
    display:block; 
    width:180px; 
    height:57px; 
    background:rgba(0, 0, 0, 0.5); 
    position:absolute; 
    left:0; 
    top:100%; 
    transition:all 0.5s; 
} 
.button:hover:before { 
    top:0; 
} 
table td { 
    margin-top: 10px; 
    margin-bottom: 10px; 
    padding: 0px 0px 0px 0px; 
    border-left:1.0px solid #000; 
    border-right:1.0px solid #000; 
    border-spacing:5px; 
} 
table { 
    border-collapse: collapse; 
}

來源

2014-07-07 07:45:29 aashi

我有固定的問題：

我有更改此設置：

<td class="button">

要這樣：

<td><div class="button">

來源

2014-07-07 07:48:04 user3675605

如何在按鈕和邊框之間添加空間？

回答

相關問題