css - cssを使用してスペースを追加するにはどうすればよいですか？

Question

ここにjsfiddleがあります

私がやりたいのは、「返信数」というテキストの横に少しスペースを追加して、テキストがどちらかの側のテーブルの境界線に近づきすぎないようにすることです。また、右側の両方のラジオボタンの横にスペースを追加したいと思います。

これはどのように達成できますか？

ありがとう

Answer 1

CSS に padding:10px を追加すると、要素の周りに十分なスペースを確保して、要素が境界線にぶつからないようにすることができます。

#replies td{
    border-collapse:collapse;
    border:1px solid black; 
    padding:10px;    
}​

これが更新されたjsfiddleで、それがどのようになるかがわかります。

次に、ラジオ ボタンの問題を解決するために、<span>Single と Multiple の両方を a で囲み、スペースを取り除きます。また、div各入力/スパン ペアの周りに を追加します。その後、これを CSS に追加します。

span {
    padding-left:5px;   
}

例については、このjsfiddleを参照してください。

変更された HTML は次のとおりです。

<tr>
    <td>Number of <br/>Replies: </td>
    <td align="left">
        <div class="td">
            <input type="radio" name="reply" value="single" class="replyBtn" />
            <span>Single</span>
        </div>
        <div class="td">
            <input type="radio" name="reply" value="multiple" class="replyBtn" />            
            <span>Multiple</span>
        </div>
    </td>
</tr>

Answer 2

レイアウトにテーブルを使用することを無視して、これが私が行うべきだと思う方法です

HTML

<table id="replies">
   <tr>
     <th colspan="2">Replies</th>
   </tr>
   <tr>
      <td>Number of <br/>Replies: </td>
      <td align="left">
          <input type="radio" name="reply" value="single" class="replyBtn" id="reply_single" />
          <label for="reply_single">Single</label><br />
          <input type="radio" name="reply" value="multiple" class="replyBtn" id="reply_multiple" />
          <label for="reply_multiple">Multiple</label>
      </td>
  </tr>
</table>

CSS

#replies td
{
  padding:5px;
  border-collapse:collapse;
  border:1px solid black;    
}

#replies input:radio
{
    margin-right:5px;
}

フィドル

Answer 3

最初にマークアップを変更することを検討してください。<td>または<th>タグに直接テキストを追加しないでください。テキストを追加するために作られたタグがあります。ブラウザはテキストをレンダリングして表示しますが、それは良い習慣ではありません。今あなたの質問に来ています..マークアップは次のようになります::::

<table id="replies">
<tr>
     <th colspan="2">
         <span>Replies</span>
     </th>
</tr>
<tr>
    <td><span>Number of </span><br/><span>Replies: </span></td>
    <td align="left"><span><input type="radio" name="reply" value="single" class="replyBtn" />Single</span><br /><span>
    <input type="radio" name="reply" value="multiple" class="replyBtn" /> Multiple</span></td>
</tr>
</table>​

そして、CSSに以下を追加する必要があります:::

#replies span{
    margin:0 0 0 5px;
}
​

こちらのJSFIDDLEをご覧ください

Answer 4

単純な古い HTML はどうですか?

<table cellpadding="3">

または CSS:

#replies td, #replies th { padding: 3px; }

この場合、このテーブルの TD と TH の両方がこのパディングを取得します (より適切な書式設定)。