Question

我有一个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>的{{1}}的顶部和底部添加一些空格？目前，我对其next属性的贡献并不重要，“下一个”链接与margin-bottom的最后一次之间的差距不会发生变化，并且几乎没有变化链接和页面底部之间的空格。

Answer 1

使用padding-top和padding-bottom创建空白区域。

例如：

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

将在“下一个”链接的顶部和下方添加300像素。

Answer 2

...试

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

明确这两个属性可能会或可能不会产生其他内容的问题，但它可以根据您发布的内容正常工作。

DEMO HERE

在div的顶部和底部添加空间

2 个答案: