私は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>
next
margin-bottom
Blah Blah Blah