我有以下代码,例如:
JSFiddle:http: //jsfiddle.net/ntcg3/4/
HTML:
<html>
<p class="hey">hi</p>
</html>
CSS:
.hey {
width:100%;
background-color:red;
margin:0;
padding:0;
}
</p>
页面右侧仍有一些填充。
我怎样才能摆脱那个填充,使红色背景颜色延伸到页面的最后?
我有以下代码,例如:
JSFiddle:http: //jsfiddle.net/ntcg3/4/
HTML:
<html>
<p class="hey">hi</p>
</html>
CSS:
.hey {
width:100%;
background-color:red;
margin:0;
padding:0;
}
</p>
页面右侧仍有一些填充。
我怎样才能摆脱那个填充,使红色背景颜色延伸到页面的最后?
试试这个:
display:block;
text-align:right;
你会得到你需要的输出
尝试使用以下 CSS
*{margin:0; padding:0}
当您默认创建 HTML 页面时,<body>以及其他一些元素,如段落标签 ( <p>)、标题标签 ( <h1>、<h2>.. <h6>) 等...具有默认padding和margins
因此,您需要通过添加以下 css 来清除这些边距:
html, body, p, h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
}
有关更多详细信息,请参阅CSS 重置
重置样式表的目标是减少浏览器在默认行高、页边距和标题字体大小等方面的不一致。
CSS 重置的示例:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
试试这个:
.hey {
width:100%;
margin:0;
padding:0;
background-color:red;
}
你应该知道,浏览器给元素添加了自己的样式,和在 ul 标签上创建的边距一样,在 body 标签上也有一个边距。我建议首先检查元素(大多数浏览器上的 control + shift + c ),以便您熟悉这些生成的样式,或者有许多“重置” css 文件首先从样式中删除填充和边距或其他类似的东西
总之,如果你包括: html, body { margin: 0; 填充:0;它将确保 html 和 body 标签不使用任何边距或填充
在您的 css 文件的开头,您需要重置这些值。
html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%; }
它会将您的所有默认值重置为零。