我正在使用 Material Design Lite 设计一个网站，我无法弄清楚为什么页面内容中的 div 之间有空格。当我为我的任何部分添加一个新的 div 时，它会在以前的 div 或标题之间创建一个空白。请参阅下面的代码:
demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
color: white;
}
.mdl-layout-title {
font-family: 'League Spartan';
font-size: 2em;
margin-top: 5px;
}
.Home-section h1{
color: floralwhite;
font-family: 'League Spartan';
text-align: center;
}
.Home-section span {
color: deepskyblue;
}
.About-section {
background-color: black;
clear: inherit;
}
.Home-section {
background: url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=db130336e8134fc3f734dbc4318f5c5e');
background-size: cover;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.blue-cyan.min.css" />
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="main.css">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body>
<div class="demo-layout-transparent mdl-layout mdl-js-layout" id="header">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Design Ambition</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
<a class="mdl-navigation__link" href="">Portfolio</a>
<a class="mdl-navigation__link" href="">Contact</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer mdl-layout--small-screen-only">
<span class="mdl-layout-title">Design <br/> Ambition`</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
<a class="mdl-navigation__link" href="">Portfolio</a>
<a class="mdl-navigation__link" href="">Contact</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<div class="Home-section"><h1>WE Create <span>DESIGNS</span> <br/> and People Just <br/>.........<br/><span>ADMIRE</span></h1></div>
<div class="About-section"><h1>ABOUT</h1></div>
</div>
</main>
</div>
</body>
</html>提前感谢您的建议。
最佳答案
您在 .Home-section 中有一个 h1 标签，在 .About-section 中有另一个标签，两者的垂直边距均为24 像素。这是造成间距的原因。
@Guffa 的 Here is a very concise explanation 关于为什么你会看到这个间距。
demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
color: white;
}
.mdl-layout-title {
font-family: 'League Spartan';
font-size: 2em;
margin-top: 5px;
}
.Home-section h1{
color: floralwhite;
font-family: 'League Spartan';
text-align: center;
}
.Home-section span {
color: deepskyblue;
}
.About-section {
background-color: black;
clear: inherit;
}
.Home-section {
background: url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=db130336e8134fc3f734dbc4318f5c5e');
background-size: cover;
}
h1 {
margin: 0 !important;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.blue-cyan.min.css" />
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link rel="stylesheet" href="main.css">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body>
<div class="demo-layout-transparent mdl-layout mdl-js-layout" id="header">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Design Ambition</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
<a class="mdl-navigation__link" href="">Portfolio</a>
<a class="mdl-navigation__link" href="">Contact</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer mdl-layout--small-screen-only">
<span class="mdl-layout-title">Design <br/> Ambition`</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
<a class="mdl-navigation__link" href="">Portfolio</a>
<a class="mdl-navigation__link" href="">Contact</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<div class="Home-section"><h1>WE Create <span>DESIGNS</span> <br/> and People Just <br/>.........<br/><span>ADMIRE</span></h1></div>
<div class="About-section"><h1>ABOUT</h1></div>
</div>
</main>
</div>
</body>
</html>关于html - divs 之间的 Material Design Lite 空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36220108/