Question

我有以下代码，例如：

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;
}

页面右侧仍有一些填充。

如何摆脱填充，使红色背景颜色延伸到页面的最末端？

Answer 1

试试这个：

display:block;
text-align:right;

您将获得您的需求输出

Answer 2

尝试使用以下CSS

*{margin:0; padding:0}

Answer 3

默认情况下，<body>和其他一些元素（如段落标记（<p>），标题标记（<h1>，<h2> ... {{}创建HTML页面时1}}）等...默认<h6>和padding

所以你需要通过添加以下css来清除这些边距：

margins

有关详细信息，请参阅CSS RESET

重置样式表的目标是减少浏览器在默认行高，边距和标题字体大小等方面的不一致性。

CSS重置示例：

html, body, p, h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
}

Answer 4

试试这个：

.hey {
    width:100%;
    margin:0; 
    padding:0;
    background-color:red;
}

Answer 5

正如您所知，浏览器将自己的样式添加到元素中，并且与在ul标记上创建的边距相同，在body标记上创建了边距。我建议先检查元素（在大多数浏览器上控制+ shift + c），这样你就会熟悉这些生成的样式，或者有很多“重置”的css文件可以从样式中删除填充和边距或其他类似的东西

简而言之，如果你包括： html，body {margin：0;填充：0; } 它将确保html和body标签不会消耗任何边距或填充

Answer 6

在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%; }

它会将所有默认值重置为零。

Answer 7

尝试设置;

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

Here 是工作小提琴。

与右边对齐

7 个答案: