css - 导致 滚动的行高/高度属性？

Question

我从不问有关 CSS 的问题，因为我通常能够自己弄明白，但出于某种原因，这让我很困惑。

我正在使用从网站获得的自定义复选框。复选框在 CSS 中呈现。该复选框包含在带边框的 DIV 中。但是，复选框的 CSS 中的某些内容导致 DIV 创建垂直滚动条。我想要的是 DIV 根据内容调整其高度，而不是创建滚动条。

我的猜测是要么是高度属性要么是行高属性——或者两者兼而有之:

input[type=checkbox].css-checkbox + label.css-label {
    padding-left: 31px;
    height: 18px; 
    display: block;
    line-height: 18px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size: 18px;
    vertical-align: middle;
    cursor: pointer;
}

我在这里重新创建了问题:http://codepen.io/anon/pen/OPLYxx

删除行高并不能解决问题。但是，如果我删除 height 属性，滚动条就会消失，但复选框会乱七八糟。

我不知道如何解决这个问题，我们将不胜感激。谢谢!

编辑:抱歉，我早该提一下。例如，我将宽度设置为特定值以重现问题。但是在实际页面中，它设置为 100%。当我缩小页面(例如移动设备)并且 DIV 的宽度更改为示例中显示的大小时，问题就出现了。

Answer 1

我将 rmtest CSS 部分替换为:

#rmtest {
    background: #f5f5f5;
    padding-bottom: 15px;
    border: 1px #d7d7d7 solid;
    width: 265px;
}

我觉得还不错。