Menu
I have a HTMLdocument 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.
619
Use padding-top, and padding-bottom to create the white space.
For example:
.next {
font: 23px "Play";
position: relative;
margin-left: 605px;
padding-top: 300px;
padding-bottom: 300px;
}
Will add 300 pixels on top and underneath the "next" link.
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
