버튼과 테두리 사이에 간격을 추가하는 방법은 무엇입니까?

-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>

코드 :

.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

'패딩 '을 사용해 보셨습니까? – TribalChief

네,하지만 버튼이 계속 늘어나고 여백을 시도했지만 아무것도 작동하지 않았습니다 – user3675605

문제를 해결할 수 있습니까? –

-1

유 .button 및 .button 패딩을 사용하여 수

I가 가지고 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

버튼과 테두리 사이에 간격을 추가하는 방법은 무엇입니까?

답변

관련 문제