0

たとえば、次のコードがあります。

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>

ページの右側にはまだ少し余白があります。

赤い背景色がページの最後まで広がるように、そのパディングを取り除くにはどうすればよいですか?

4

7 に答える 7

1

これを試して：

display:block;
text-align:right;

必要な出力が得られます

于 2012-09-07T06:34:37.343 に答える
0

デフォルトでHTMLページを作成する場合、<body>段落タグ（<p>）、見出しタグ（<h1>、<h2>.. <h6>）などの他の要素にはデフォルトがpaddingあり、margins

したがって、次のcssを追加して、これらのマージンをクリアする必要があります。

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

詳細については、CSSRESETを参照してください。

リセットスタイルシートの目的は、デフォルトの行の高さ、見出しの余白やフォントサイズなど、ブラウザの不整合を減らすことです。

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;
}
于 2012-09-07T06:33:51.680 に答える
0

次のCSSを使用してみてください

*{margin:0; padding:0}
于 2012-09-07T06:28:27.733 に答える
0

これを試してください：

.hey {
    width:100%;
    margin:0; 
    padding:0;
    background-color:red;
}
于 2012-09-07T06:34:52.147 に答える
0

ご存じのとおり、ブラウザーは要素に独自のスタイルを追加します。ul タグで作成されるマージンと同じように、body タグで作成されるマージンがあります。最初に要素を検査することをお勧めします (ほとんどのブラウザーでは control + shift + c )。これにより、これらの生成されたスタイルに慣れるか、最初にスタイルからパディングやマージンなどを削除する「リセット」css ファイルが多数存在します。

要するに、以下を含める場合: html, body { margin: 0; パディング: 0; html と body タグがマージンやパディングを使い切らないようにします。

于 2012-09-07T06:36:15.357 に答える
0

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

すべてのデフォルト値をゼロにリセットします。

于 2012-09-07T06:36:33.780 に答える
0

設定してみる;

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

ここに作業フィドルがあります。

于 2012-09-07T06:36:47.960 に答える