Html 向div的顶部和底部添加空间_Html_Css

Html 向div的顶部和底部添加空间

html css

Html 向div的顶部和底部添加空间,html,css,Html,Css,我有这样一个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'

我有这样一个

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

在类

next

的

的顶部和底部添加一些空格？目前，无论我对它的

页边距底部

属性给予了多少，下一个链接和

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

clear both属性可能会也可能不会对其他内容产生问题，但根据您发布的内容，它可以正常工作
使用padding top和padding bottom创建空白
例如：
.next {
    font: 23px "Play";
    position: relative;
    margin-left: 605px;
    padding-top: 300px;
    padding-bottom: 300px;
}

将在“下一个”链接的顶部和底部添加300像素
 要将其与上一个Blahblah分开，您必须使用边距顶部
@Nelson，出于某种原因，填充顶部
和填充底部
对我来说是有效的。在这种情况下，页边距顶部
和页边距底部都不起作用。
.next {
    font: 23px "Play";
    position: relative;
    margin-left: 605px;
    padding-top: 300px;
    padding-bottom: 300px;
}