标签与复选框重叠

Question

我尝试将填充边距放在bot输入元素以及标签的左侧，但都无济于事。您能帮我正确对齐标签吗？谢谢！

<div class="row">
        <div class="col-xs-12">
            <div class="input-checkbox">
                <input id="activateSocialMediaTrial" name="activateSocialMediaTrial" asp-for="ActivateSocialMediaTrial" type="checkbox" style="padding: 15px; margin:15px" />
                <label for="activateSocialMediaTrial" style="white-space: nowrap">Sign me up for a <b>free 30 days trial of social media management</b></label>
            </div>
        </div>
    </div>

.input-checkbox label {
  background: none;
  border: 1px solid #d3d3d3;
  text-align: center;
  position: relative;
}

Answer 1

您已将input的边距设置为margin:15px，这导致其从预期位置移动，因为在引导程序中input:checkbox具有margin:-1.25em，因此您从其位置移动它。