Why top margin for tables?

[GitToTheHub]

Hi,

after working with your framework and using tables, i notice, that there are big gaps between text and the table top border. For example, if I do the following:

<p>
  A Caption
</p>

<table>
  ...

It will result in something like this:

When I set the table margin to initial, it results in something like this:

What is the purpose of setting:

margin: 1.5rem 0;

in tables?

Regards, Manuel

[kevquirk]

To give the tables some breathing room. You can override it with custom CSS.

[GitToTheHub]

Ok, but when I combine it with a p there is much breathing room. I thought, it would be better, if the user would self decide if there is breathing room or not.

[GitToTheHub]

@kevquirk

I see what's going on. When putting a p above a table, there is no big gap, as in my first screenshot. But when putting the table in a figure, there will be a big gap between the paragraph and the table. Example:

<p>A paragraph</p>
<figure> <!-- Produces big space between paragraph and table -->
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
    </tbody>
  </table>
</figure>

Without the figure, everything is ok with the table and the paragraph.

[lkhrs]

This is a weird one. Top margin on a table is cancelled out when under a paragraph, but when the table is wrapped in a figure and is wider than the container we get both margins.

We can fix this by setting margin: 0 on the figure > table selector, but I will need to test this further.

[GitToTheHub]

Hi @lkhrs,

We can fix this by setting margin: 0 on the figure > table selector, but I will need to test this further.

I tested it and it works for paragraphs, but when writing text without a paragraph above the figure, the text has no spacing to the figure. Maybe you find a solution for it.

Thanks!

[lkhrs]

The solution is to use a paragraph. We cannot support writing text without the appropriate elements.

[GitToTheHub]

Ok understand, thanks for the fix 🙂