Question

我正在进行的项目中，我将标题的div设置为100％，主容器也是100％，但右侧和左侧是由标题填充的。顶部也不是最顶层，但我设法通过应用-ve margin修复它，但不想为左右两侧做到这一点。

请帮我解决这个问题，这是CSS和HTML代码：

@font-face{ font-family:'Junction';
 src:url('junction/Junction-webfont.eot');
 src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');

}
#main {
  width: 100%;
  padding: 0;
}
h1 {
  font-size: 2em;
  padding: 1.7%;
}
#header {
  min-width: 100%;
  background-color: #FF6978;
  display: block;
  font-family: Junction, "Times New Roman", sans-serif;
  width: 100%;
  margin-top: -1.6%;
}

<!doctype html>
<html lang="en">

<head>
  <title>Check</title>
  <meta charset="UTF-8">
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="main">
    <!--open main div-->
    <div id="header">
      <h1>Chekcking</h1>
    </div>
    <!--close header-->
  </div>
  <!--close main-->
</body>

</html>

注意：我使用的是嵌入式字体Junction，它不在线。而且，我不想将宽度增加到120％并使左边距-ve。请提出另一种方式

非常感谢， Arthrax

Answer 1

您需要从正文和其他元素中删除默认边距。 “通用”复位是一个很好的选择，同时适当的复位CSS是最佳的

* {
  margin:0;
  padding:0;
  }

@font-face{ font-family:'Junction';
 src:url('junction/Junction-webfont.eot');
 src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');

}

* {
  margin:0;
  padding:0;
  }

#main {
  width: 100%;
  padding: 0;
}
h1 {
  font-size: 2em;
  padding: 1.7%;
}
#header {
  min-width: 100%;
  background-color: #FF6978;
  display: block;
  font-family: Junction, "Times New Roman", sans-serif;
  width: 100%;
  margin-top: -1.6%;
}

<!doctype html>
<html lang="en">

<head>
  <title>Check</title>
  <meta charset="UTF-8">
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="main">
    <!--open main div-->
    <div id="header">
      <h1>Chekcking</h1>
    </div>
    <!--close header-->
  </div>
  <!--close main-->
</body>

</html>

Answer 2

尝试添加：

body {
    margin: 0;
}

as show in this fiddle.

Answer 3

只需将margin property value 0添加到正文

即可

＆＃13;

@font-face{ font-family:'Junction';
 src:url('junction/Junction-webfont.eot');
 src:url('junction/Junction-webfont.eot?iefix') format('eot'),
url('junction/Junction-webfont.woff') format('woff'),
url('junction/Junction-webfont.ttf') format('truetype'),
url('junction/Junction-webfont.svg#webfont') format('svg');

}
body {
  margin: 0;
}
#main {
  width: 100%;
  padding: 0;
}
h1 {
  font-size: 2em;
  padding: 1.7%;
}
#header {
  min-width: 100%;
  background-color: #FF6978;
  display: block;
  font-family: Junction, "Times New Roman", sans-serif;
  width: 100%;
  margin-top: -1.6%;
}

＆＃13;

<!doctype html>
<html lang="en">

<head>
  <title>Check</title>
  <meta charset="UTF-8">
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="main">
    <!--open main div-->
    <div id="header">
      <h1>Chekcking</h1>
    </div>
    <!--close header-->
  </div>
  <!--close main-->
</body>

</html>

＆＃13;

Answer 4

大多数浏览器会向margin的所有方面应用8px的默认<body>。除此之外，<h1>的边距也会导致#header DIV被推下。该保证金还会导致低于#header的DIV被推下并添加一个白色＆＃34;之间的空间。

body,
#header h1 {
    margin: 0;
}

无法使标题div适合整个屏幕

4 个答案: