フィールドセット要素のボーダースペーシング

Question

フィールドセットの要素を「パッド」しようとしていて、ボーダースペーシングを使用することを提案しました。 w3の学校を見ると、境界線の間隔は表の要素だけにしか見えないので、何をすべきか分かりません。ここに私のCSSとHTMLがあります。 border-spacingを使用すると、ページの表示は変更されませんでした。

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

あなたは、単にfieldsetにpaddingを使用することができます。

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の上パディングを使用します。

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>