[英]Remove left padding css
I am trying to create a simple fixed navigation bar, but there is a white margin/padding down the left of the computer screen that I can't figure out how to get rid of. 我正在尝试创建一个简单的固定导航栏,但在计算机屏幕的左侧有一个白色边缘/填充,我无法弄清楚如何摆脱。
CSS: CSS:
#menu-bar {
padding-left: 0px;
padding-right: 110px;
margin: 0 auto;
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
background-color: #333;
}
#menu-bar a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#menu-bar a:hover {
color: grey;
}
HTML: HTML:
<div id="menu-bar">
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
</div>
In most major browsers, the default margin is 8px on all sides.
在大多数主流浏览器中,默认边距为8px。 It is defined in pixels by the user-agent-stylesheet your browser provides.
它由您的浏览器提供的user-agent-stylesheet以像素为单位定义。
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
有些浏览器允许您创建和使用自己的用户代理样式表,但是如果您正在开发一个网站,我建议您不要更改它,因为您的用户很可能没有修改过的样式表,然后会看到不同的页面比你做的。
So, You can Reset/Normalize your css by adding this code: 因此,您可以通过添加以下代码来重置/标准化您的CSS:
html, body { margin: 0; padding: 0; }
But if you have a large project and want complete restting use normalize.css . 但是如果你有一个大型项目并希望完全重新使用normalize.css 。 It resets a lot of default values to be consistent across browsers.
它会将许多默认值重置为跨浏览器保持一致。 Good Luck ^_^!
祝你好运^ _ ^!
You need to remove the default margin on the <body>
element: 您需要删除
<body>
元素上的默认边距:
#menu-bar { padding-left: 0px; padding-right: 110px; margin: 0 auto; position: fixed; top: 0; width: 100%; color: #ffffff; height: 35px; text-align: center; padding-top: 15px; background-color: #333; } #menu-bar a { font-size: 14px; padding-left: 15px; padding-right: 15px; color: white; text-decoration: none; } #menu-bar a:hover { color: grey; } body { margin:0; }
<div id="menu-bar"> <a href="#">Home</a> <a href="#">Home</a> <a href="#">Home</a> </div>
Just add margin: 0;
只需添加
margin: 0;
to the body to remove its default margin style. 到身体去除其默认边距样式。 Example below:
示例如下:
body{ margin:0; } #menu-bar { padding-left: 0px; padding-right: 110px; margin: 0 auto; position: fixed; top: 0; width: 100%; color: #ffffff; height: 35px; text-align: center; padding-top: 15px; background-color: #333; } #menu-bar a { font-size: 14px; padding-left: 15px; padding-right: 15px; color: white; text-decoration: none; } #menu-bar a:hover { color: grey; }
<div id="menu-bar"> <a href="#">Home</a> <a href="#">Home</a> <a href="#">Home</a> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.