html - 为复选框旁边的标签设置边距

Question

我想在我的复选框旁边为文本设置边距。在我的 HTML 中，它看起来像是一行，但在我的网站上，由于字体的原因，它需要两行(这对我来说非常好)。

无论我做什么:如果我用填充、边距或边框来做，每次，只有第一行文本向右移动一点点，但第二行正好紧挨着我的复选框。你可以帮帮我吗？

jsFiddle

.contact input {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  outline: 1px solid #24ba9f;
  float: left;
}
.contact label {
  font-size: 18px;
  text-align: left;
  color: #b2b2b2;
  text-align: left;
  line-height: normal;
  padding-left: 10px;
}

<div class="contact">
  <label>
    <input type="checkbox" checked>Lorem ipsum, lorem ipsum, lorem ipsum
  </label>
</div>

Answer 1

给你

.contact input {
  width: 50px;
  height: 50px;
  background-color: #ffffff;
  outline: 1px solid #24ba9f;
  float: left;
}

.contact label {
  font-size: 18px;
  text-align: left;
  color: #b2b2b2;
  text-align: left;
  line-height: normal;
  padding-left: 10px;
}

.contact span {
  display:inline-block;
  margin-top:10px;
}

<div class="contact">
  <label>
    <input type="checkbox" checked>
    <span>Lorem ipsum, lorem ipsum, lorem ipsum</span>
  </label>
</div>