Grow your CSS skills. Land your dream job.

Vertical Spacing without Margins

  • # February 4, 2012 at 12:51 pm

    Hi!

    Currently I use Ryan Fait’s sticky footer on almost every site I own or set up. I love it. One issues I’ve come across though is that spacing sections of a site vertically can turn out to be a bit of a nightmare, as it doesn’t like you adding vertical margins to content.

    Is there a nice way of spacing my elements vertically without using margins?

    At the moment I use all sorts of horrible techniques.

    This one as to keep the background colour a particular colour, you can’t just pad the div you’re trying to space:




    Content.


    or this one:




    Content.


    They both seem riddled with unnecessary markup.

    Thanks! Dave

    # February 4, 2012 at 4:28 pm

    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.

    # February 5, 2012 at 1:08 pm

    Hey Chris that’s super clever – thanks for the reply!

    # February 6, 2012 at 6:06 am

    Or, with transparent border and background-clip: http://jsfiddle.net/tovic/8KqE6/

    # February 6, 2012 at 6:12 am

    Hey I really like that…! Awesome.

    I wish these both worked in IE8 though…

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".