1
내 HTML에는 뷰포트의 높이에 걸쳐 몸체가 펼쳐져 있고 뷰포트에는 텍스트 단락이 들어있는 div가 있습니다. 내 텍스트는 약간의 여백이 있으며, 그 때문에 텍스트가 본문을 초과합니다.
문단이 본문의 자식 인 div의 자식 이었기 때문에 단락의 여백이 부모를 초과 했으므로 정말 이상하다고 생각했습니다. 이것에 대한 해결책이 있습니까? (내가 남기고 싶은 마진을 제외하고)
미리 감사드립니다!
Picture
이것은 당신은이 페이지의 상단에 도달하지 명확하게 볼 오른쪽에있는 Inspector에서 선택된으로 푸른 물건 (실제로 몸
내 물건 :..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