CSSの枠線 - テキストの直下にない

-1

CSSでHTML5を学習し始めたばかりで、自分の履歴書を作成しようとしています（Codecademyのエクササイズ）。私の問題は、私が副題の下に黒い線を置こうとしている、私が作ろうとしている副題の部分である。しかし、行とテキストの間には大きなギャップがあります。CSSの枠線 - テキストの直下にない

#header { 
 
    margin-top: -3.5px; 
 
    background-color: #C3CDD4; 
 
    height: 90px; 
 
    width: 98.5%; 
 
    position: relative; 
 
} 
 

 
#name { 
 
    font-family:Verdana, Geneva, sans-serif; 
 
    font-size: 40px; 
 
    float: left; 
 
    margin-left: 20px; 
 
    margin-top: 20px; 
 
    /*padding bottom: 50px;*/ 
 
} 
 

 
#address { 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    float:right; 
 
    margin-top: 25px; 
 
    margin-right: 60px; 
 
} 
 

 
#contact { 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    float: right; 
 
    clear: left; 
 
    margin-top:-60px; 
 
    margin-right: 20px; 
 
} 
 

 
.subheader { 
 
    position: relative; 
 
    height: 100px; 
 
    margin-left: 20px; 
 
    margin-top: -2.5px; 
 
    font-size: 20px; 
 
    font-family: Verdana; 
 
    border-bottom: 1px solid; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
    <title></title> 
 
    </head> 
 
    <body> 
 
    <div id="header"> 
 
     <p id="name"> Vincent William Barker </p> 
 
     <p id="address">67294 Washington Way</p> 
 
     <p id="contact">999.999.9999 · [email protected]</p> 
 

 
    </div> 
 

 
    <div class="subheader"> 
 
     <h4 class="subheader_title">Education</h4> 
 

 
    </div> 
 

 

 
    <div class="left"></div> 
 
    <div class="right"></div> 
 
    <div id="footer"></div> 
 
    </body> 
 
</html>

出典

2016-08-24 Vincent

あなたはサイトは現在、どのように見えるかのスクリーンショットを提供することはできますか？あなたが話しているギャップを指摘してください。 – Endama

コードスニペットを実行すると、まさにそのようになります。私は黒い線を「教育」の真下にしたい。 – Vincent

-1

あなたdivの側面がまっすぐになりたい場合は、プロパティborder-radius: 5px;を削除します。あなたのラインとサブヘッダの間のスペースは、.subheader divのheight: 100px;というこのプロパティに起因していました。そのプロパティを削除すると、問題は修正されます。それをサブヘッダに近づけるには、ボーダーボトムプロパティを削除する必要があります。その後、新しいdivを作って下のプロパティを見てください。

#header { 
 
    margin-top: -3.5px; 
 
    background-color: #C3CDD4; 
 
    height: 90px; 
 
    width: 98.5%; 
 
    position: relative; 
 
} 
 
#name { 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    font-size: 40px; 
 
    float: left; 
 
    margin-left: 20px; 
 
    margin-top: 20px; 
 
    /*padding bottom: 50px;*/ 
 
} 
 
#address { 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    float: right; 
 
    margin-top: 25px; 
 
    margin-right: 60px; 
 
} 
 
#contact { 
 
    font-family: Verdana, Geneva, sans-serif; 
 
    float: right; 
 
    clear: left; 
 
    margin-top: -60px; 
 
    margin-right: 20px; 
 
} 
 
.subheader { 
 
    position: relative; 
 
    margin-left: 20px; 
 
    margin-top: -2.5px; 
 
    font-size: 20px; 
 
    font-family: Verdana; 
 
} 
 
.line { 
 
    margin-top: -20px; 
 
    height: 1px; 
 
    width: 100%; 
 
    background-color: black; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css" /> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <div id="header"> 
 
    <p id="name">Vincent William Barker</p> 
 
    <p id="address">67294 Washington Way</p> 
 
    <p id="contact">999.999.9999 · [email protected]</p> 
 

 
    </div> 
 

 
    <div class="subheader"> 
 
    <h4 class="subheader_title">Education</h4> 
 

 
    </div> 
 
    <div class="line"> 
 

 
    <div class="left"></div> 
 
    <div class="right"></div> 
 
    <div id="footer"></div> 
 
</body> 
 

 
</html>

出典

2016-08-24 00:53:20

なぜ私はdownvotedされましたか？ –

スペーシングにはどのようなプロパティを使用しますか？私はそれをテキストの下にさらに近づけたい。線の高さと詰め物の底はうまくいかないようです。 – Vincent

私もそれに答えるでしょう。 –

CSSの枠線 - テキストの直下にない

答えて

関連する問題