CSS标签丢失边距/填充答案

【问题标题】：CSS label lose margin/paddingCSS标签丢失边距/填充
【发布时间】：2014-03-06 20:50:06
【问题描述】：

我无法丢失两个单选按钮标签之间的填充和/或边距。

这是我目前所拥有的：http://jsbin.com/putoz/6/edit

到目前为止我已经尝试过：

强制外部 div 的宽度
在两个标签上强制 margin-rigth/left 和 padding-right/left 为 0px

【问题讨论】：

标签： css radio-button label

【解决方案1】：

最简单的方法是让标签成为块元素并浮动它们：

DEMO

label {  
    width: 32px;
    height: 29px;
    cursor: pointer;  
    position: relative;  

    display: block;
    float: left;
    line-height: 29px;
}

您需要调整行高以使文本保持垂直居中。

或者，如果这不切实际，只需从标记中删除空格：

这个：

<input id="appointment-yes" type="radio" name="set-appointment" value="yes" />
<label class="yes-label" for="appointment-yes"></label>
<input id="appoinment-no" type="radio" name="set-appointment" value="no" />
<label class="no-label" for="appoinment-no"></label>

变成：

<input id="appointment-yes" type="radio" name="set-appointment" value="yes" /><label class="yes-label" for="appointment-yes"></label><input id="appoinment-no" type="radio" name="set-appointment" value="no" /><label class="no-label" for="appoinment-no"></label>

DEMO

【讨论】：

谢谢。我最终添加了 margin-right: -3px;到我的 .yes-label 解决了这个问题。