如何将这些输入元素相对于其标签向下移动？

Question

小提琴

我想相对于它们的标签向下移动输入元素（仅约3个像素）。我遇到的主要问题是进行输入display: block;会破坏整个布局。我需要将代码文本显示在标签和与其关联的输入的正下方，就像现在一样。

HTML：

<label for="inputSize"><p>Size</p><input id="inputSize" class="char2" type="text"><br><code>font-size: 17px;</code></label>
<label for="inputWeight"><p>Weight</p><input id="inputWeight" class="char3" type="text"><br><code>font-weight: 400;</code></label>
<label for="inputSpacing"><p>Letter-spacing</p><input id="inputSpacing" class="char2" type="text"><br><code>letter-spacing: 0;</code></label>
<label for="inputWSpacing"><p>Word-spacing</p><input id="inputWSpacing" class="char2" type="text"><br><code>word-spacing: 0;</code></label> 

CSS：

label {
    white-space: nowrap;
    display: inline-block;
}
label p {
    background: aqua;
    display: inline-block;
    color: @gray1;
    padding: 1px 10px;
    font-size: 16px;
    line-height: 24px;
}
input {
    font-family: monospace;
    height: 14px;
    box-shadow: 0px 0px 7px 0px #b8b8b8;
    border: 0;
}

谢谢！！

Answer 1

使用，position: relative您可以相对于元素应在的位置移动元素（在您的情况下为）top: 3px。

http://jsfiddle.net/ExplosionPIlls/3YUTM/1/