I have a HTML
document 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.
margin-top
padding-top
andpadding-bottom
are what work for me. Neithermargin-top
normargin-bottom
does anything in this case.