Search code examples
htmlcsscss-tables

display as table-cell


I'm playing around with display properties trying to get the hang of them.

One question I had was how to get spacing between the table cells. Right now I have 4 images that are boxed up against each other. I want to have them tight to the left side but spacing in between. So even spacing everywhere except the left. I tried to use border-spacing: 5px; but that added spacing on the left.

I put a version in jsfiddle but its rendering with another issue. In jsfiddle its showing space between the rows. Not sure why that's happening as its working correctly in the browser.

http://jsfiddle.net/chapster11/RjGaX/


Solution

  • You need to add padding:5px 5px 5px 0; to #displayWrapper #grid .gridImage to get the even padding.

    This rule says add 5px of padding to the top, right, and bottom and 0 padding to the left.

    Add img {vertical-align:bottom;} to fix the extra space at the bottom.

    http://jsfiddle.net/jasongennaro/RjGaX/3/