Question

您好，

所以这是我的代码，我试图更好地掌握网页设计，而不是使用其他方式制作网站，例如将边距设置为左侧或右侧的负值状态（例如：margin-left: -10px）。 / p>

我在head标签中有一个标题，在标题内部有一个名为“mainBanner”的div，但是当我尝试设置Max-width来填充整个页面时，它会填充它但是会留下大约10％的空白区域横幅之外的边距。

代码：

 <header>
 <div id="mainBanner">
    <img src="logo.png">
 </div>

这是CSS代码：

 body {
background-color: #d7d7d7;
      }
 #mainBanner {
background-color: #663333;
height: 90px;
width: auto;
max-width: 100% auto;
margin-top: -1%;
border-bottom: 3px solid #402225;

  }

我做错了什么？通常我在css中的#mainBanner标签中设置类似

的标签

margin-left: -10px;
margin-right: -10px;

填补这些空白。但有人告诉我，初学者网页设计师第一次做出响应式网页设计并不是一个好习惯。有没有更好的方法呢？

Answer 1

默认情况下，您需要删除浏览器在body标记上设置的边距：

body {
    margin: 0;
}

Answer 2

Body标签有自己的边距，你应该使用一些修复例如

html, body {
    margin: 0px;
    padding: 0px;
}

Answer 3

几乎所有浏览器在body标签中设置10px的保证金byDefault

身体边缘就是那个问题

这里最好做的是全局重置

*{
margin: 0;
padding: 0;
}

Answer 4

虽然，我认为你应该接受上面的答案，因为这很可能是你的问题。然后我会给你一个快速的CSS重置代码。

html {color: #000000; background: #FFFFFF;}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin: 0; padding: 0;}
input, select, textarea {outline: none; border: none;}
table {border-collapse: collapse; border-spacing: 0;}
fieldset, img {border: 0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal;}
ol, ul {list-style: none;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
q:before, q:after {content: ''; content: none;}
abbr, acronym {border: 0; font-variant: normal;}
sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}
input, textarea, select {font-family: inherit; font-size: inherit; font-weight: inherit;}
input, textarea, select {*font-size: 100%;}
legend {color: #000000;}

如果您在项目中使用此功能，那么大多数与浏览器相关的问题应该为空，您可以自行设置。这是我在所有网站上使用的重置代码。当然有更复杂的重置代码，但这通常足以满足基础要求。

另外，作为附注，您是否正确地写了<header>元素在<head>元素内？因为，那不是它应该如何。在头部保留您的脚本等，但用户可见的html必须在<body>内。

我的Max-Width到100％并没有填满整个页面以开始制作响应式设计

4 个答案: