匹配fieldset引导程序中的顶部和底部填充

Question

我正在按照以下帖子向bootstrap中的fieldset和legend添加一些css。

Use Fieldset Legend with bootstrap

HTML

<fieldset class=" scheduler-border">
    <legend class="scheduler-border">Start Time</legend>
    <div class="control-group">
        <label class="control-label col-xs-6 input-label" for="startTime">Start :</label>
        <div class="controls col-xs-6  bootstrap-timepicker">
            <input type="text" class="datetime" type="text" id="startTime" name="startTime" placeholder="Start Time" />
            <i class="icon-time"></i>
        </div>
    </div>
</fieldset>

CSS

fieldset.scheduler-border {
    border: 1px groove  !important;
    padding: 0 1em 1em !important;
    margin: 0 0 0 0 !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
            box-shadow:  0px 0px 0px 0px #000;
}
    legend.scheduler-border {
        font-size: 1.1em !important;
        font-weight: bold !important;
        text-align: left !important;
        width:auto;
        padding:0 5px;
        border-top:none;
        border-bottom:none;
    }

小提琴： http://jsfiddle.net/zpp1u1q5/

以下是它现在的样子

如何更改CSS以减少​​H1并使其等于H2？

Answer 1

您的第一个差距是legend的{​​{1}}：

虽然第二个差距是margin-bottom的{​​{1}}：

造成的

调整其中一个以获得所需的布局（fieldset上的4px padding-bottom似乎很合适

Answer 2

也许您需要更改padding-left，这是解决方案： http://jsfiddle.net/td9o6ecg/

<fieldset class=" scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
    <label class="control-label col-xs-6 input-label" style="padding-left: 5px;" for="startTime">Start :</label>
    <div class="controls col-xs-6  bootstrap-timepicker">
        <input type="text" class="datetime" type="text" id="startTime" name="startTime" placeholder="Start Time" />
        <i class="icon-time"></i>
    </div>
</div>
</fieldset>