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.
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.