Search code examples
pythonhtmlcssjinja2

HTML div with padding

I apologies in advance because I'm sure this is pretty straightforward but frontend isn't my field! I have an html document I'm having issues with. The general structure is as follows:

<div style="padding-bottom: 1cm;">
   <h4>Digital</h4>
   <h5 style="text-align: left;">Data Table:</h5>
   <table>
      <!-- the rest of the table here -->
   </table>
</div>

I have several of these div elements being generated by Jinja (python). My intention of the padding is to add space between the div elements in the page. This works as I'd expect if the is empty (or very few rows) but as soon as the table grows the padding no longer works as I'd expect.

The HTML above gives me an output like the one below: (note how the empty space between 'Second table' and 'Third table' is smaller than between the space between 'First table' and 'second table'

enter image description here

Solution

  • use margin-bottom instead and allow overflow on your parent element.

    for better result style the parent element that holds them use flexbox or grid