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

简单的旧 HTML 怎么样？

<table cellpadding="3">

或 CSS：

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

在这种情况下，这个表的 TD 和 TH 都得到这个填充（更好的格式）。

Answer 4

您可以考虑先对标记进行更改。请不要将任何文本直接添加到您的<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