Reputation: 339

How to add space between table and text

How can I add space between table border (all sides) and text. Tried with padding but that didn't work. Is there any way to add space?

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>

Upvotes: 1

Answers (7)

bigbadmad

Reputation: 51

Of course you could always add margin to the paragraph instead, something like:

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

Then you could remove that horrible font tag and b tag and use the p styling instead for the desired results:

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

Upvotes: 1

Shamse Alam

Reputation: 1315

padding is the way to add space between text content and border.

I have cleaned your code so that you can see the effect. Use following code and see the effect

Style

.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>

Upvotes: 1

Rahul Desai

Reputation: 15501

You can fix that using padding-left property in CSS for the <p>.

Working Code Snippet:

.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;
}

<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>

Read up: padding-left - CSS | MDN

P.S. To get the text aligned in the center, use text-align: center; in the CSS for p.

Upvotes: 0

Yuyutsu

Reputation: 2527

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>

Upvotes: 0

Abdul Muheet

Reputation: 315

For me the padding is working just check it

<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;

}

The Fiddle https://jsfiddle.net/635tfeLx/

Upvotes: 0