7

I have a HTMLdocument like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link type='text/css' href='https://fonts.googleapis.com/css?family=Cantarell:700,400' rel='stylesheet'>
        <link type='text/css' href='https://fonts.googleapis.com/css?family=Play:700,400' rel='stylesheet'>
        <link type="text/css" href="./mycss.css" rel="stylesheet">
    </head>
    <body>
        <div class="page-title">
            <h1>Title</h1>
        </div>
        <div class="page-content">
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <p>Blah Blah Blah</P>
            <div id="nextPage" class="next">
                <a href="https://www.google.com">Next</a>
            </div>
        </div>
    </body>
</html>

which is being styled by this CSS:

body {
    height: 100%;
    width: 960px;
    min-height: 550px;
    max-height: 1080px;
    margin: 20px 60px 40px 20px;
    padding-left: 10px;
}

.page-title h1 {
    height: 55px;
    font-family: "Play";
    font-size: 38px;
    font-weight: 700;
}

.page-content {
    font-family: "Cantarell";
    font-size: 16px;
    font-weight: 400;
    width: 650px;
    text-align: justify;
}

.next {
    font: 23px "Play";
    position: relative;
    margin-left: 605px;
    margin-bottom: 25px;
}

Is there a way using cross-browser compatible CSS to add some blank space to both the top and the bottom of the <div> of class next? At the moment, it doesn't matter how much I give to its margin-bottom property, the gap between the 'Next' link and the last time of Blah Blah Blah does not change, and the there is very little space between the link and the bottom of the page.

2
  • To separate it from last Blahblah you have to use margin-top
    – Nelson
    Commented Dec 2, 2012 at 23:33
  • @Nelson, for some reason, padding-top and padding-bottom are what work for me. Neither margin-top nor margin-bottom does anything in this case.
    – MLister
    Commented Dec 3, 2012 at 0:04

2 Answers 2

11

Use padding-top, and padding-bottom to create the white space.

For example:

.next {
    font: 23px "Play";
    position: relative;
    margin-left: 605px;
    padding-top: 300px;
    padding-bottom: 300px;
}

Will add 300 pixels on top and underneath the "next" link.

0

Try....

.next {
    font: 23px "Play";
    position: relative;
    clear:both;
    margin-top: 40px;
    margin-left: 605px;
    margin-bottom: 25px;
}

The clear both property may or may not create issues with other content, but it works fine based on what you've posted.

DEMO HERE

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .