0
私のウェブページのスクリーンショットとHTML、CSS、JavaScriptをアップロードしました。 <h1>タグと解決できない<section>タグに空白があります。私のHTML文書の空白を取り除くことができません
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}* {margin: 0; padding: 0;}
.mySlides {display:none;}
.logo{
\t float:left;
\t margin-right: 100px;
}
.navigation{
background-color:skyblue;
height:55px;
}
.navbar li {
\t list-style-type: none;
\t display:inline;
\t font-family: 'Fjalla One', sans-serif;
\t font-size: 1.5em;
\t font-weight: bold;
\t margin-right: 4em;
}
.navbar a{
\t text-decoration: none;
\t color: black;
}
header{
float:left;
}
.sidebar h1{
\t font-family: 'Pacifico', cursive;
\t text-align: center;
}
.footer{
\t clear:both;
\t background-color: grey;
height: 207px;
\t width:100%;
\t }
.links{
\t margin-bottom:3px;
\t
}
.bottomlinks{
\t list-style-type: none;
\t font-family: verdana;
\t font-weight: bold;
\t text-decoration: none;
\t margin-left: 100px;
\t margin-right:100px;
\t margin-top: 15px;
\t margin-bottom: 55px;
\t float:left;
}
.bottomlinks li a{
text-decoration: none;
color: black;
}
.address{
\t margin-top:15px;
\t margin-right: 400px;
\t list-style-type: none;
\t font-family: verdana;
\t font-weight: bold;
\t float:left;
}
.social-icons{
\t margin-top:70px;
\t float:right;
\t list-style-type: none;
}
.social-icons li{
\t display: inline;
\t margin-right: 20px;
}
.social-icons a {
color: white;
opacity:0.8;
}
.social-icons i{
\t font-size: 1.5em;
}
.fa-facebook {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-facebook:hover {
background-color: #3d5b99;
}
.fa-twitter {
padding:10px 12px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-twitter:hover {
background-color: #00aced;
}
.fa-instagram {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-instagram:hover {
background-color:#bc2a8d;
}
.fa-youtube {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-youtube:hover {
background-color: #e64a41;
}
.fa-linkedin {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-linkedin:hover {
background-color: #0073a4;
}
.fa-google-plus {
padding:10px 9px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-google-plus:hover {
background-color: #d34836;
}
.copyright{
\t clear: both;
\t text-align: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cafe New Bengaluru | Home</title>
<link rel="icon" href="icon.png" type="image/png" sizes="16x16">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="logo">
<a href=""><img src="logo.png" width="70px" height="50px"></a>
</div>
<nav class="navigation">
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<header>
<img src="home.jpg" width="840px" height="400x" alt="Hotel Entry Image">
</header>
<section class="sidebar">
<h1>Menu of the day</h1>
<img class="mySlides" src="pekingrice.jpg" width="500px" height="326px">
<img class="mySlides" src="chickenmomo.jpeg" width="500px" height="326px">
<img class="mySlides" src="lollipop.jpg" width="500px" height="326px">
</section>
<footer class="footer">
<ul class="bottomlinks">
<li><p class="links">Links</p></li>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="address">
<li><p class="links">Address</p></li>
<li>#123, Arcade Heights</li>
<li> Delta Block</li>
<li> Indiranagar, StageII</li>
<li>Karnatake: 560008</li>
</ul>
<ul class="social-icons">
<li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
</ul>
<p class="copyright">©2017.All Rights Reserved </p>
</footer>
<script src="myfile.js"></script>
</body>
</html>
ブラウザのインスペクタツールで計算された余白と余白を確認してください – ThisGuyHasTwoThumbs
これを更新して、[最小] ***を重視した[mcve]を追加してください。 – zzzzBov
サイドバーの余白を設定します..あなたのCSSで –