Re: Vertical Spacing without Margins

[chrisjg]

Have you tried using a gradient fill background with an opacity change from 1 to 0, then padding the bottom to your div?
The effect is that (with a little tuning of the background) you can get it to look like there is a horizontal margin.

Some simple HTML

The content in this div is separated from the next div by about 10px - using padding of 10px below it, and a gradient fill for the background with a hard stop at 96% from opacity:1 to opacity:0. Giving the appearance of being spaced by a horizontal margin.





The content in this div is sparated from the previous div by an apparent margin of 10px;

To have the background blue, text colour white and the gradient fill turning transparent at 96% of the height of the div. use the following…

Some CSS

.div-to-be-spaced {

width:150px;

color:white;

padding-bottom: 10px;



background: -moz-linear-gradient(top,  rgba(0,0,255,1) 0%, rgba(0,0,255,1) 96%, rgba(0,0,255,0) 96%, rgba(0,0,255,0) 100%); /* FF3.6+ */



background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,255,1)), color-stop(96%,rgba(0,0,255,1)), color-stop(96%,rgba(0,0,255,0)), color-stop(100%,rgba(0,0,255,0))); /* Chrome,Safari4+ */



background: -webkit-linear-gradient(top,  rgba(0,0,255,1) 0%,rgba(0,0,255,1) 96%,rgba(0,0,255,0) 96%,rgba(0,0,255,0) 100%); /* Chrome10+,Safari5.1+ */



background: -o-linear-gradient(top,  rgba(0,0,255,1) 0%,rgba(0,0,255,1) 96%,rgba(0,0,255,0) 96%,rgba(0,0,255,0) 100%); /* Opera 11.10+ */



background: -ms-linear-gradient(top,  rgba(0,0,255,1) 0%,rgba(0,0,255,1) 96%,rgba(0,0,255,0) 96%,rgba(0,0,255,0) 100%); /* IE10+ */



background: linear-gradient(top,  rgba(0,0,255,1) 0%,rgba(0,0,255,1) 96%,rgba(0,0,255,0) 96%,rgba(0,0,255,0) 100%); /* W3C */



}

See it working at http://jsfiddle.net/5rmvy/2/

You can do the same with vertical spacing by changing the background gradient fill to run horizontally. Usethe colorzilla gradient editor to generate the fill CSS code.

Hope this helps.

Chris.