Space above just one table

Am trying to get a certain amount of space above just one table of many on a website, and have tried the below, but it doesn’t seem to work? How do you lot do it please?

<table class="space">

table.space {
	margin-top: 10px;
	padding-top: 10px;
	width: 100%;
	}

Can you be more specific? How much is “a certain amount”? And where is the table located? What is above it? Context matters. :slight_smile:

How much is “a certain amount”? The amounts in the css above.
And where is the table located? Middle.
What is above it? Another table.

If the code is not behaving as you expect it to behave, then it’s a reasonable assumption that something in the surrounding code is interacting and/or over-riding it.

A link to a working demo of the problem, or alternatively the full HTML and CSS for the page, would enable us to look at the problem, rather than guess.

2 Likes

Agreed. margin-top is the correct selector (see demo markup below). If it’s not working, then there’s something else that’s overriding. Use inspect element to determine why.

<!DOCTYPE html>
<html>
<head>
   <style>
      table { margin-top: 20px; }
      table.space { margin-top: 50px; }
      table, th, td { border: 1px solid black; }
   </style>
</head>
<body>
   <h2>Add a border to a table:</h2>
   <table>
     <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>Bill</td>
        <td>Smith</td>
    </tr>
    <tr>
        <td>Lisa</td>
        <td>Brown</td>
    </tr>
  </table>
  <table class="space">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>John</td>
        <td>Jones</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Doe</td>
    </tr>
  </table>
</body>
</html>

Not looking for any guesses really. If the coding below was in your html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>New Page 1</title>
</head>
<body>
<table class="space">
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>Test</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
</body>
</html>

and your css file consisted only of:

table.space {
	margin-top: 10px;
	padding-top: 10px;
	width: 100%;
	}

should it work?

Yes. (As you presumably know from having tested it yourself.)

Thanks DaveMaxwell, your helpful friendly style is brilliant and much appreciated. :+1:

Bearing in mind the above scenario, would you really need both the below:

      table { margin-top: 20px; }
      table.space { margin-top: 50px; }

Never good to presume anything, especially that one! :wink:

But, anyways, that doesn’t work, hence the reason for asking!

No, but I was just showing that it does work (and in regards to your conditions listed above)

It DOES work. The 10px is just a very small amount. Change it to 50px or 100px and refresh it and you’ll see a change.

2 Likes

It does work when I copy and paste that into a page. (And I’m only presuming that you have already tested because you have enough experience to try that before posting here.)

Sorry buddy, I was replying to others with that post.

Just to clarify, the help given by DM has solved it.

When I said it didn’t work, I was referring to the other parts.

Nope, it didn’t work, hence the reason for posting.

It did work - it was just misleading because of the margin-size (10px is probably smaller than the default font size, much less font-size + line height, which is why I made it 20px and 50px in my example - just to show it worked). Changing it to 1em or some multiplier would make it more noticeable immediately…

2 Likes

It depends on what is above the table as Ron asked earlier:)

If you have a floated item above the table then the margin-top will do nothing at all as it slides under the float above.

If a non floated element above the table has a 20px bottom margin then again the 10px top margin on the table will have no effect.

If an element that creates a new block formatting context (such as inline-block) is above the table then the 10px margin-top will have an effect as margins don’t collapse between those elements.

The padding-top of the table is the space inside the table and in-between the td content and as such will not move the table away from other content although in some cases padding and margin can achieve the same appearance. Padding is the space inside the element and margin is the space outside the element.

As you see the answer is ultimately dependent on the context and no one answer can satisfy all the above criteria.:slight_smile:

3 Likes

I don’t have the inclination to be more involved in this thread. Dave cut to the chase and helped straight away, which was appreciated. :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.