Question

我试图＆＃34;垫＆＃34;我的fieldset的元素，并建议我使用边框间距。看看w3学校，看来边框间距仅适用于桌子元素，所以我不确定还能做什么。这是我的CSS和HTML。使用边框间距不会更改页面的显示。

fieldset {
    display: block;
    /*margin: 0 auto;*/
    /*text-align: center;*/
    /*margin-left: 2px;*/
    /*margin-right: 2px;*/
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove;
}

.table {
    display: table;
    /*text-align: center;*/
    /*margin: 0 auto;*/

}

.tr {
    display: table-row;
    /*padding-top: 0.35em;*/
    /*padding-bottom: 0.625em;*/
    vertical-align: top;
    border-spacing: 10px 50px;
}

.td {
    display: table-cell;
    text-align: left;
    vertical-align: top;
    /*border-spacing: 10px 50px;*/
}

.td.right {
    text-align: right;
}
<fieldset>
            <div class="tr">
                <div class="td right">Date of Call:</div>
                <div class="td"><input class="datepicker2" name="callDate"></div>
                <div class="td right">Caller code Number:</div>
                <div class="td"><input class="CodeMaker" name="callerCodeNum"></div>
                <div class="td right">Is there a warrant? If so what is the jurisdiction?</div>
                <div class="td"><input type="text" name="jurisdiction"></div>
            </div>
</fieldset>

Answer 1

您只需在padding上使用fieldset：

fieldset {
  display: block;
  border: 2px groove;
  padding: 50px 20px;
}

.table {
  display: table;
  /*text-align: center;*/
  /*margin: 0 auto;*/
}

.tr {
  display: table-row;
  /*padding-top: 0.35em;*/
  /*padding-bottom: 0.625em;*/
  vertical-align: top;
  border-spacing: 10px 50px;
}

.td {
  display: table-cell;
  text-align: left;
  vertical-align: top;
  /*border-spacing: 10px 50px;*/
}

.td.right {
  text-align: right;
}

<fieldset>
  <div class="tr">
    <div class="td right">Date of Call:</div>
    <div class="td"><input class="datepicker2" name="callDate"></div>
    <div class="td right">Caller code Number:</div>
    <div class="td"><input class="CodeMaker" name="callerCodeNum"></div>
    <div class="td right">Is there a warrant? If so what is the jurisdiction?</div>
    <div class="td"><input type="text" name="jurisdiction"></div>
  </div>
</fieldset>

或者你的意思是田野之间的距离？然后在td s：

上使用填充

fieldset {
  display: block;
  border: 2px groove;
  padding: 10px;
}

.table {
  display: table;
  /*text-align: center;*/
  /*margin: 0 auto;*/
}

.tr {
  display: table-row;
  /*padding-top: 0.35em;*/
  /*padding-bottom: 0.625em;*/
  vertical-align: top;
  border-spacing: 10px 50px;
}

.td {
  display: table-cell;
  text-align: left;
  vertical-align: top;
  /*border-spacing: 10px 50px;*/
  padding: 20px;
}

.td.right {
  text-align: right;
}

<fieldset>
  <div class="tr">
    <div class="td right">Date of Call:</div>
    <div class="td"><input class="datepicker2" name="callDate"></div>
    <div class="td right">Caller code Number:</div>
    <div class="td"><input class="CodeMaker" name="callerCodeNum"></div>
    <div class="td right">Is there a warrant? If so what is the jurisdiction?</div>
    <div class="td"><input type="text" name="jurisdiction"></div>
  </div>
</fieldset>

fieldset元素的border-spacing

1 个答案: