1
私のHTMLには、ビューポートの高さにボディが張られていますが、ビューポートにはテキストの段落を含むdivがあります。私のテキストにはいくらかのマージンがあります。そのために、それはボディを超えています。
私は段落のマージンが親を超えているということは、段落が本文の子であったdivの子だったので、本当に奇妙だと思っていました。これには解決策がありますか？ （私がそれを保ちたいので余白を取り除くことを除いて）
ありがとうございます！これは右側のインスペクタで選択されているよう
Picture
青いものが（実際に体であるあなたは、それはページの最上部に到達していないはっきりと見る
私のもの：。。HTMLテキストマージンがボディを超えています
@font-face {
font-family: "MavenPro";
src: url('fonts/MavenPro-Medium.ttf');
}
@font-face {
font-family: "MavenPro";
src: url('fonts/MavenPro-Bold.ttf');
font-weight: bold;
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
margin: 0;
font-family: "MavenPro";
background-image: url('../images/BIER.jpeg');
background-color: white;
background-size: cover;
background-position: center;
}
p {
margin: 10px;
}
#nav {
position: relative;
width: auto;
float: left;
top: 0;
padding: 0;
height: auto;
height: 100%;
}
#menu {
list-style-type: none;
padding: 10px;
margin: 10px 5px;
display: inline-block;
box-sizing: border-box;
}
.mitem {
-webkit-transition-duration: 0.2s;
background-color: #dea243;
border-radius: 20px;
padding: 10px;
padding-left: 15px;
padding-right: 35px;
margin: 15px 5px;
font-size: 20px;
font-weight: bold;
color: #ae4411;
}
.mitem:link {
/*no css yet*/
}
.mitem:hover {
-webkit-transition-duration: 0.2s;
background-color: #d2b651;
color: #cccccc;
padding-left: 25px;
padding-right: 25px;
}
.mitem:active {
-webkit-transition-duration: 0.1s;
padding-left: 30px;
padding-right: 20px;
background-color: #ee7744;
}
a:link, a:visited {
text-decoration: none;
color: #0025ff;
-webkit-transition-duration: 0.2s;
}
a:hover {
-webkit-transition-duration: 0.2s;
color: #0045ff;
}
a:active {
-webkit-transition-duration: 0.2s;
color: #ff4444;
}
#content {
/*no css yet*/
}<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/mainstyle.css">
</head>
<body>
<div id="nav">
<ul id="menu">
<a href="#link"><li class="mitem">Home</li></a>
<a href="#link"><li class="mitem">Alcohol</li></a>
</ul>
</div>
<div id="content">
<p>paragraph</p>
<p><a href="#link">Here is a link</a>
</div>
</body>
</html>
コードを共有する.. – Pranjal