Home/ Questions/Q 8938419
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T10:37:13+00:00

I have a HTML document like this: <!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8>

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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