L'ajout d'espace en haut et en bas d'un div

J'ai un HTMLdocument comme ceci:

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

qui est en train de style 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;
}

Est-il un moyen à l'aide de la croix-navigateur compatible CSS pour ajouter un espace vide à la fois le haut et le bas de la <div> de classe next? Pour le moment, il n'a pas d'importance combien je donner à ses margin-bottom propriété, l'écart entre les "à Côté" et la dernière fois de Blah Blah Blah ne change pas, et la il y a très peu d'espace entre le lien et le bas de la page.

  • Pour la séparer de la dernière Blahblah vous devez utiliser margin-top
  • pour une raison quelconque, padding-top et padding-bottom sont ce travail pour moi. Ni margin-top ni margin-bottom ne fait rien dans ce cas.
InformationsquelleAutor MLister | 2012-12-02
  1. 8

    Utiliser padding-top, et padding-bottom pour créer l'espace blanc.

    Par exemple:

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

    Va ajouter 300 pixels sur le dessus et en dessous du lien "suivant".

    InformationsquelleAutor eshellborn
  2. 0

    Essayer....

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

    Le ressort à la fois de la propriété peut ou ne peut pas créer de problèmes avec d'autres contenus, mais il fonctionne très bien d'après ce que vous avez posté.

    DÉMO ICI

    InformationsquelleAutor Scott