Reduce spacing in Table

• 

  dlburbank · Member · Sep 29, 2015 at 2:50 am

  • Copy link
  • Add topic to favorites

  On my home page, I have a two rows of 3 graphics with subtext underneath them. I’d like to have the text directly under the graphic, and the items spaced evenly horizontally, with minimal spacing vertically. To achieve this, I used a table, and tried to reduce the spacing via CSS. But the spacing between the icon and the words remains large and the spacing is not consistent–it is larger with the first set of icons than with the second.
  How can I make the spacing even, and reduce the vertical spacing between the icon and the text? Thanks.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Sep 29, 2015 at 5:59 am

  • Copy link

  Hi, give the following CSS a try and see what you think.

  .home table tr td p {
      margin-bottom: 0;
      margin-top: 0;
  }
  .home table tr:nth-child(even) {
      vertical-align: top;
  }

• 

  dlburbank · Member · Sep 29, 2015 at 1:34 pm

  • Copy link

  Thanks! This did help, and I also added td { padding: 0 0; }, which further helped reduce the spacing.

  But there is still a large amount of whitespace between each row. Is there a way to reduce that as well?

  P.S. And I’m curious why we needed to use the “nth-child(even)”? It worked, but I don’t understand why? This part isn’t urgent, but just curious….

• 

  dlburbank · Member · Sep 29, 2015 at 2:34 pm

  • Copy link

  Ah! I figured it out. In the HTML for the table on the home page, the table element had style=”height: 322px;” width=”783″ defined. I removed that and the spacing is now fine. Not sure where that code came from–maybe automatically from the visual editor? In any case, it’s now removed, and your solution worked. Thanks again.

• 

  thesacredpath · Member · Sep 29, 2015 at 7:56 pm

  • Copy link

  That is awesome, and you are welcome.