Newbie here. Don't want to embarrass myself but I couldn't find a compelling solution while browsing responses to similar questions so I apologize for being a nuisance. I'm working on designing my neocities page and this is my first experience with HTML & CSS. Everything is turning out fine, except for some reason there's a duplicate box (?) at the very bottom of my page. Very sorry for the my disastrous & untidy code because I have little to no idea of what I'm dealing with. Please help me out if you have the patience. Sidenote: It seems to have appeared after I tweaked the margins of the buttons but I can't say for sureThe white space looks like this. HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blog title</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div ></div>
</body>
<div >
<h1>welcome</h1>
<p>introducrion</p>
<div style="text-align: center;">
<button >buttonname1</button>
<button >buttonname2</button>
<button >buttonname3</button>
<button >buttonname4</button>
<button >buttonname5</button>
</div>
</div>
</html>
CSS:
body {
background-image: url('https://img.hmv.co.jp/image/jacket/400/79/1/8/014.jpg');
}
h1{
text-align: center;
background-color: #ffffff;
}
.content{
width: 700px;
height: 680px;
margin: auto;
background: #ffffff;
padding: 30px;
}
.container{
position: relative;
}
.box{
position: absolute;
}
.style
@font-face{
font-family: 'Robotic Monkey';
src: url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.woff") format("woff"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.svg#Robotic Monkey") format("svg");
font-weight: normal;
font-style: normal;
}
.logo h1{
font-family: Robotic Monkey;
font-size: 45pt;
color: black;
text-align: center;
}
@font-face{
font-family: "Robotic Monkey";
src: url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.woff") format("woff"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/8228af465877153a59194e55cb42ddce.svg#Robotic Monkey") format("svg");
}
h1{
font-family: 'Robotic Monkey';
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: monospace;
}
p{
font-family: monospace;
font-weight: bold;
font-style: normal;
color: black;
font-size: 11pt;
text-align: center;
}
div{
background: #ffffff;
border-radius: 25px;
height: 680px;
}
.button1{
display: block;
padding: 16px;
background-color: #ffffff;
border: 2px solid #1A1A1A;
border-radius: 15px;
box-sizing: border-box;
color:black;
display: inline-block;
font-family: monospace;
font-size: 16px;
font-weight:bold;
line-height: 0px;
margin: auto;
min-height: 60px;
min-width: 300px;
outline: none;
padding: 16px 24px;
text-align: center;
will-change: transform;
width: 50%;
position: relative;
}
.button2{
display: block;
padding: 16px;
background-color: #ffffff;
border: 2px solid #1A1A1A;
border-radius: 15px;
box-sizing: border-box;
color:black;
display: inline-block;
font-family: monospace;
font-size: 16px;
font-weight:bold;
line-height: 0px;
margin: auto;
margin-top: 10px;
min-height: 60px;
min-width: 300px;
outline: none;
padding: 16px 24px;
text-align: center;
will-change: transform;
width: 50%;
position: relative;
}
.button3{
display: block;
padding: 16px;
background-color: #ffffff;
border: 2px solid #1A1A1A;
border-radius: 15px;
box-sizing: border-box;
color:black;
display: inline-block;
font-family: monospace;
font-size: 16px;
font-weight:bold;
line-height: 0px;
margin: auto;
margin-top: 10px;
min-height: 60px;
min-width: 300px;
outline: none;
padding: 16px 24px;
text-align: center;
will-change: transform;
width: 50%;
position: relative;
}
.button4{
display: block;
padding: 16px;
background-color: #ffffff;
border: 2px solid #1A1A1A;
border-radius: 15px;
box-sizing: border-box;
color:black;
display: inline-block;
font-family: monospace;
font-size: 16px;
font-weight:bold;
line-height: 0px;
margin: auto;
margin-top: 10px;
min-height: 60px;
min-width: 300px;
outline: none;
padding: 16px 24px;
text-align: center;
will-change: transform;
width: 50%;
position: relative;
}
.button5{
display: block;
padding: 16px;
background-color: #ffffff;
border: 2px solid #1A1A1A;
border-radius: 15px;
box-sizing: border-box;
color:black;
display: inline-block;
font-family: monospace;
font-size: 16px;
font-weight:bold;
line-height: 0px;
margin: auto;
margin-top: 10px;
min-height: 60px;
min-width: 300px;
outline: none;
padding: 16px 24px;
text-align: center;
will-change: transform;
width: 50%;
position: relative;
CodePudding user response：
Two height values were present in this code.
- class content having height: 680px;
- button wrap container div having height: 680px;
For you mentioned issue, you need to remove the button wrap container div height.
Hope, it helps.
CodePudding user response：
In your CSS, set div { height:auto } then the duplicate box will disappear.
CodePudding user response：
The problem is caused by two dives (.content, div) with different heights.
change the height of the div.
div {
background: #ffffff;
border-radius: 25px;
height: 450px;
}