Question

如何在表格边框（所有边）和文本之间添加空格。尝试填充，但没有工作。有没有办法增加空间？

CSS

.border1 {
  border-top:thin solid;
  border-bottom:thin solid;
  border-left:thin solid;
  border-right:thin solid;
  border-color:black;
  padding: 5px;
}

HTML

<table class="formLayout" width="81%" cellspacing="0" cellpadding="0">
    <tr>
        <td class="border1">
        <b><font size="3" face="Arial"><p>Message to display</p></font></b>                                                         
        </td>
    </tr>
</table>

Answer 1

由于<p>，您在顶部和底部看到的空间更多。移除<p>，然后您可以增加padding 或者你可以使用如下。

padding: 5px 10px;

它会在顶部和底部添加5px padding，在左右添加10px

Answer 2

padding是在文本内容和边框之间添加空间的方法。

我已清理您的代码，以便您可以看到效果。使用以下代码并查看效果

<强>风格

.table-border {
        border:1px solid black;
        padding: 10px;  
        border-collapse: collapse;      
    }

<强> HTML

<table width="81%" cellspacing="0" class="table-border">
            <tr>
                <td class="table-border" >
                    One
                </td>  
                <td class="table-border" >
                    Two
                </td>   
            </tr>

      </table>

Answer 3

当然，您可以随时为段落添加边距，例如：

.formLayout tr td.border1 p{
   margin: 5px;
}

然后你可以删除那个可怕的字体标签和b标签，并使用p样式代替所需的结果：

.formLayout tr td.border1 p{
   margin: 5px;
   font-family: Arial;
   font-weight: bold;
}

Answer 4

您可以使用＆＃34; align-text：center＆＃34;把你的＆＃34; p＆＃34;像这样：

p {
    text-align: center;
    }

Fiddle here

Answer 5

您可以使用padding-left中的<p>属性修复该问题。

工作代码段：

＆＃13;

.border1 {
  border-top:thin solid;
  border-bottom:thin solid;
  border-left:thin solid;
  border-right:thin solid;
  border-color:black;
  padding: 5px;
}

p{
  padding-left: 50px;
}

＆＃13;

<table class="formLayout" width="81%" cellspacing="0" cellpadding="0">
  <tr>
    <td class="border1">
      <b><font size="3" face="Arial"><p>Message to display</p></font></b>
    </td>       
  </tr>
</table>

＆＃13;

阅读： padding-left - CSS | MDN

P.S。要在中心对齐文字，请在text-align: center;的CSS中使用p。

Answer 6

对我来说，填充工作只是检查

<table class="formLayout" width="81%" cellspacing="0" cellpadding="0">
<tr>
    <td class="border1">
    <b><font size="3" face="Arial"><p>Message to display</p>   </font></b>                                                         
    </td>
</tr>
 </table>


  .border1 {
 border-top:thin solid;
 border-bottom:thin solid;
 border-left:thin solid;
    border-right:thin solid;
    border-color:black;

   padding: 18px 122px 11px;

}

小提琴https://jsfiddle.net/635tfeLx/

Answer 7

CSS

.border1 {
      border-top:thin solid;
      border-bottom:thin solid;
      border-left:thin solid;
      border-right:thin solid;
      border-color:black;
      border-color: darkred;
      border-style: solid;
      color: red;
      padding: 5px 15px;    
    }

<强> HTML

<table class="formLayout" width="81%" cellspacing="0" cellpadding="0" style="border:2px;">
<tr>
    <td class="border1">    
        <b><font size="3" face="Arial"><p>Message to display</p></font></b>                                                 
    </td>
     </tr>
</table>

如何在表和文本之间添加空格

7 个答案: