減少DIV均勻

Question

高度在撥弄IM試圖減少CSS類的高度：

http://jsfiddle.net/25LjE/76/

我減少類的高度PDS票：

.pds-vote { 
background-color:#424242; 
    height:20px !important; 
} 

但高度並沒有被統一減小。投票按鈕下方的高度小於投票按鈕上方的高度，是否可以將投票按鈕統一縮小，以便在投票按鈕上方和下方有相等數量的邊框？

背後搗鼓

代碼：

.pds-question-top { 
font-size:10pt !important; 
padding-top:1px !important; 
padding-bottom:1px !important; 
margin-top:1px !important; 
margin-bottom:1px !important; 
} 

.pds-pd-link, .pds-comments { 
display:none !important; 
} 

.pds-box { 
width:220px !important; 
} 

.pds-input-label { 
width:85% !important; 
} 

.PDS_Poll { 
margin-bottom:15px; 
} 

.pds-answer-span { 
color:#00f; 
} 

.pds-vote { 
background-color:#424242; 
} 

.pds-answer-text { 
color:#00f; 
padding-top:1px !important; 
padding-bottom:1px !important; 
margin-top:1px !important; 
margin-bottom:1px !important; 
} 

.pds-answer-feedback { 
padding-top:1px !important; 
padding-bottom:1px !important; 
margin-top:1px !important; 
margin-bottom:1px !important; 
} 

.pds-votebutton-outer { 
text-align:center; 
} 

.pds-answer-group { 
padding-top:1px !important; 
padding-bottom:1px !important; 
margin-top:1px !important; 
margin-bottom:1px !important; 
height:auto; 
overflow:hidden; 
} 

.pds-input-label,.pds-answer-input { 
float:left; 
} 

.pds-view-results,.pds-links { 
color:#FFF !important; 
padding-top:1px !important; 
padding-bottom:1px !important; 
margin-top:1px !important; 
margin-bottom:1px !important; 
} 

.pds-comments,.pds-return-poll { 
color:#FFF !important; 
} 

.pds-links { 
    display: inline !important; 
} 
.pds-pd-link { 
display: none !important; 
} 
.pds-box { 
    width: 220px !important; 
} 
.pds-input-label{ 
    width: auto! important; 
} 
.PDS_Poll{ 
    margin-bottom:15px; 
} 

.pds-question-top {padding:0 !important} 

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6352993.js"></script> 
<noscript><a href="http://polldaddy.com/poll/6352993/">This is very long test question to test how polldaddy handles questions that exceed that normal length............ yes a very long question indeed..............</a></noscript> 

$(document).ready(function() { 

    $('.pds-question-inner').prepend('<span style="color:red;font-weight:bold;font-size: 15px;float:left">Header</span>'); 
}); 

Answer 1

設置line-height相同的值作爲height並移除任何填充。這樣，內容是垂直居中，這使得高度均勻分佈：http://jsfiddle.net/25LjE/77/。

.pds-vote { 
    background-color: #424242; 
    height: 40px !important; /* 20px does not fit the contents */ 
    line-height: 40px !important; 
    padding: 0 !important; 
} 

Answer 2

您的投票按鈕高於20px，這就是爲什麼按鈕溢出您的「居中」容器。

而不是設置爲.pds-vote的高度，請減少它的容器的填充。

.pds-vote { 
    background-color: #424242; 
} 
#PDI_container6352993 .pds-vote { 
    padding: 4px 0px; 
}