-1

HTML ページで HR タグを使用しています。しかし、水平線は X 軸に沿ってページ全体をカバーしていません。左右とも隙間があります。このギャップを埋めるにはどうすればよいですか？

たとえば、以下はサンプル コードです。

<html>
   <hr>
</html>
4

4 に答える 4

1

You can do the following -> demo

You have two options that I know of anyways - Using a horizontal line or a div with a top or bottom border.

The reason why you have a space or gap is because browsers comes with different pre-set settings - so you need to set margin and padding to zero. Take a look at the demo.

CSS

* {
    margin:0;
    padding:0;
}
hr {
    margin-top: 30px;
    /*so you can see it in demo */
    width: 100%
}
.demo {
    position: relative; /*so I could use 'top: 30px' */
    top: 30px;
    /*so you can see it in demo*/
    width: 100%;
    border-top:1px solid black;
}

HTML

<hr/>
<div class="demo"></div>

Edit: As Ojdo commented, you CAN reset before working on a project using something like this Meyer's Reset OR you can make it 'cross-browser' compatible and use normalize.css from Necolas - this basically tries to make your default css look consistent among several browsers. The choice is ultimately up to you. Start from the ground up or start with something somewhat consistent.

于 2013-06-29T10:07:09.313 に答える
0

ギャップは、要素のデフォルトの 8 ピクセルのマージンによって引き起こされますbody(これは一般的なブラウザーのデフォルトであり、CSS 2.1 と HTML5 CR の両方で説明されています)。

bodyかなり単純に水平マージンをオーバーライドできます。

body { margin-left: 0; margin-right: 0 }

「CSS リセット」のような、より広範なオーバーライドを使用することは可能ですが、多くの方法でページ レイアウトに影響を与える可能性があり、body.

ただし、これらの余白を削除すると、テキストが左端から右端に移動し、文字が端に接触することがよくあります。したがって、何にも影響を与えずに横罫線をページ全体に広げたい場合は、負のマージンを設定します。次に、マージンを明示的に設定するのが最善ですbody(ブラウザが一般的な慣行に従ってマージンを実装しないのを防ぐため):

body { margin: 8px }
hr { margin-left: -8px; margin-right: 8px }
于 2013-06-29T11:03:52.187 に答える
0

それは体の余白のためです。これを試して：

<html>
    <body style="margin:0;">
    <hr>
    </body>
</html>
于 2013-06-29T10:14:44.453 に答える