html - 匹配字段集 Bootstrap 中的顶部和底部填充

Question

我正在按照下面的帖子在 Bootstrap 中向字段集和图例添加一些 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;
    }

fiddle : http://jsfiddle.net/zpp1u1q5/

这是现在的样子

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

Answer 1

你的第一个差距是由于 legend 的 margin-bottom :

虽然第二个差距是由于 fieldset 的 padding-bottom:

调整其中一个以获得您想要的布局(legend 上的 4px margin-bottom 似乎很合适)