<hr>行の位置をテキストの下3ピクセルに設定する

Question

私のウェブサイトでは、テキストが前面に表示されています。私はテキストの下に<hr>の3ピクセルを置こうとしていますが、動的に配置しようとしても、<hr>は同じ場所にとどまります。でもこのJSFiddleでそれを配置してみてください：あなたはおそらく言うことができるのよう

Text on top of HR line 3px

は、私はそれを配置することができない...と、現時点では、それは一種の醜いです。

私が作成した完全なウェブサイトでは、私は<video> htmlタグを持っています。これは再生しています。トップメニューもありますので、自分のウェブサイトのどのカテゴリを選択するかを選択できます。ここではスクリーンショットです：

私も直接<hr>下のボタンを追加する予定ですが、私は私が最初にこの問題に固執するべきだと思います。

Answer 1

<hr>を非表示にし、段落に行を追加してみます。

#toptext p { 
    border-bottom: 1px solid red; 
    line-height: 66px; 
} 

そして、行の高さを調整します。このよう

。

Answer 2

は、すべての余分なCSSの行き過ぎを削除し、lets keep life simple :)

HTML

<p>MatthewTheBottleFlipper</p> 

CSS

p { 
    font-family:"Open Sans", san-serif, Arial; 
    font-size:500%; 
    color:#000; 
    text-align:center; 
    position:absolute; 
    top:5px; 
    text-align:center; 
    left:15%; 
    border-bottom:solid 1px #000; /* u need this */ 
    padding-bottom:3px /* ...and this */ 
} 

Answer 3

はpタグは当然マージンやパディングを持っています。ちょうどそれを削除し、すべてはあなたが望むどのように動作します：あなたの現在のコードの中で何が起こる

#toptext { 
font-family:"Open Sans", san-serif, Arial; 
font-size:500%; 
color:#000; 
text-align:center; 
position:absolute; 
top:5px; 
text-align:center; 
left:15%; 
} 

#line { 
height:0.5px; 
background-color:#03f; 
margin-top: 3px /* I can't position this three pixels under text */ 
} 

p { padding: 0; margin: 0; } 

Answer 4

は、ブラウザのデフォルトはp {margin: ...some value depending on browser...;}をしていることです。

まず、独自のCSSルールを追加して上書きする必要があります。ここでは#toptext p {margin: 0;}です。

<hr>をどのように配置するかは、margin-topを使用して自由に選択できます。あなたがテキストの大きなフォントサイズを持っているとして、あなたは以下の例のように、<hr>ため負マージンを使用する必要がありますので、それは、その下にいくつかのスペースを保持し、こと
注：

#toptext { 
 
\t font-family:"Open Sans", san-serif, Arial; 
 
\t font-size:500%; 
 
\t color:#000; 
 
\t text-align:center; 
 
\t position:absolute; 
 
\t top:5px; 
 
\t text-align:center; 
 
\t left:15%; 
 
} 
 
#toptext p { 
 
    margin: 0; 
 
} 
 
#line { 
 
\t height: .5px; 
 
\t background-color: #03f; 
 
    margin-top: -15px; 
 
}

<div id="toptext"> 
 
    <p>MatthewTheBottleFlipper</p> 
 
    <hr id="line"/> 
 
    
 
</div>