Question

我决定创建自己的博客，并且我正在尝试为它进行布局。我刚刚开始，我已经遇到了问题。我想要一个在屏幕上一直延伸的标题，顶部或侧面没有空白区域，我正计划让我的博客响应。我已经尝试将保证金设置为0，似乎无法使任何工作。我试图在这里搜索答案，但无法得到任何工作。这是我的HTML和CSS。谢谢你的帮助！

P.S。我以这种奇怪的方式制作徽标的原因是因为我要用粗体字和膨胀字体中的一个单词，这是我能想到的唯一方法。

HTML：

<!DOCTYPE html>

<html>
<title>FatHead | Blog</title>
<link href="http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400itali" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">

<head>

</head>

<body>
<div class="header">

    <div class="logo">

        <h1 id="logo-large">FAT</h1><h1 id="logo-small">HEAD</h1>

    </div>

    <div class="nav">

    </div>

</div>






</body>    


</html>`

CSS：

.header{
background-color: lightslategray;
margin:0;
padding:0;
width: 100%;


}

.logo{
text-align: center;
display: block;
margin:15px;
}

#logo-large{
display: inline;
}

#logo-small{
display: inline;
}

Answer 1

从body和.logo移除相应的边距。

body {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}
.header {
  background-color: lightslategray;
  margin: 0;
  padding: 0;
  width: 100%;
}
.logo {
  text-align: center;
  display: block;
  margin: 0 15px 15px;
}
#logo-large {
  display: inline;
}
#logo-small {
  display: inline;
}

<div class="header">

  <div class="logo">

    <h1 id="logo-large">FAT</h1>
    <h1 id="logo-small">HEAD</h1>

  </div>

  <div class="nav">

  </div>

</div>

Answer 2

你必须添加

body
 {
    margin:0;
    padding:0;
 }

并更改你的CSS

.logo{
 text-align: center;
 display: block;
  margin:15px;
 }

到这个

  .logo{
 text-align: center;
 display: block;
  margin:0 15px 15px 15px;
 }

JSFiddle

无法摆脱标题两侧的空白区域

2 个答案: