6

私はHTMLこのような文書を持っています:

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

これはこの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;
}

クロスブラウザ互換を使用して、クラスCSSの上部と下部の両方に空白を追加する方法はありますか?現時点では、そのプロパティにいくら与えるかは関係ありません。「次へ」リンクと前回のリンクの間のギャップは変わりません。また、リンクとページの下部の間にはほとんどスペースがありません。 。<div>nextmargin-bottomBlah Blah Blah

4

2 に答える 2

9

パディングトップとパディングボトムを使用して空白を作成します。

例えば:

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

「次の」リンクの上と下に300ピクセルを追加します。

于 2012-12-02T23:47:58.750 に答える
0

試す....

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

両方のプロパティをクリアすると、他のコンテンツで問題が発生する場合と発生しない場合がありますが、投稿内容に基づいて正常に機能します。

デモはこちら

于 2012-12-02T23:41:42.577 に答える