最初のヘッダーの後に、私のヘッダーと私のdivの間の空白を変更するにはどうすればよいですか？

どういうわけか、 "Larry Rosenburg"という名前とその下の画像の間に固定された空白があります。どのようにマージンを変更しても、距離には影響しません。ここにスクリーンショットがありますscreenshot!最初のヘッダーの後に、私のヘッダーと私のdivの間の空白を変更するにはどうすればよいですか？

空白を短くするにはどうしたらいいですか？ここ

は私のhtmlです：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title> Larry Rosenburg Official Website </title> 
     <link rel="stylesheet" href="style.css"> 
     <link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet"> 
    </head> 

    <body> 
     <header> 
      <div id="logo"> 
       <img src ="lincoln.jpg" width ="27%" alt="Lincoln logo" id="logo_picture"> 
       <nav> 
        <ul> 
         <li> <a href="index.html"> Home </a> </li> 
         <li> <a href="http://www.lincolnlandservices.com/index.html"> Lincoln </a> </li> 
         <li> <a href="about.html"> About </a> </li> 
         <li> <a href="contact.html"> Contact </a> </li> 
        </ul> 
       </nav> 

      </div> 
     </header> 
     <div class="clearfix"> </div> 

     <div id="title"> 
      <p>Larry Rosenburg </p> 
     </div> 

     <div id="profile"> 
      <img src="picture.jpg" width="25%" alt="" id="profile-pic" > 
     </div> 
    </body> 
    <footer> 
    </footer> 

</html>

そして、ここでは、CSSです：の

body{ 
    width: 100%; 
} 
#logo_picture{ 
    margin-left: 80px; 
} 

#logo img, #logo nav{ 
    float: left; 
} 
#logo nav{ 
    line-height: 120px; 
    margin-left: 250px; 
} 
nav ul{ 
    list-style: none; 
    margin: 0 10px; 
    padding: 0; 

} 

nav li{ 
    display: inline; 
} 

nav a{ 
    color: black; 
    font-size: 20px; 
    font-family:'Arsenal', 'sans-serif'; 
    font-weight: 300; 
    padding: 2px 38px; 
    text-decoration:none; 
} 

nav a, nav a:visited { 
    color: black; 
} 

nav a.selected, nav a:hover{ 
    color: grey; 
} 

#title{ 
    font-size: 70px; 
    margin-top: 70px; 
    margin-bottom: 0; 
    text-align: center; 
    font-family: 'Anton','sans-serif'; 

} 
#profile-pic{ 
    border-radius: 30px; 
    background: url('picture.jpg'); 
    margin: 30px auto; 
    display: block; 
    padding: 0; 
    border-top: 0; 

} 



.clearfix { 
    clear: both; 
}

出典

2017-01-21 Kat

あなたが使用している実際の画像での作業のデモを提供する場合、それはかなり役立つだろう。 –

あなたのCSS margin: 30px auto;は30pxとして上部と下部の余白を設定します。それはあなたが見ている空白です。マージンを個別に設定するか、一度にすべて設定します。現在のスタイルを使用しないでください。

このような質問を投稿する前に、Webブラウザを使用してhtml要素を調べてみてください。すべてのWebブラウザに要素のレイアウトと余白が表示されます。問題をより速く解決するのに役立ちます。

出典

2017-01-21 17:01:36

こんにちは！マージンを個別に設定したり、一度にすべてを設定することはどういう意味ですか？なぜこのスタイルが間違っているのかまだ分かりません。私はチェックするためにchrome devのツールを使用しましたが、それはスペースがどこにも属していないことを示しています。 – Kat

@Catherineマージンを 'margin：30px auto'と設定しているときは、マージンを' margin-top：30px; margin-right：auto; margin-bottom：30px; margin-left：auto; 'それで、それを 'margin-top：30px; margin-right：10px; margin-bottom：30px; margin-left：10px; 'またはすべてを一度にmargin：30px 10px 30px 10px; –

-1

これを試してください。

<p style="margin-bottom:0px">Larry Rosenburg </p>

画像にも余白がある場合があります。

出典

2017-01-21 17:01:56 tarik01

質問シートに示すように、スタイルシートファイルを使用してください。 – Davdriver

私はこれを編集しました。私のデバイスでうまく動作するので、これを試してみてください。

#profile-pic { 
    background: rgba(0, 0, 0, 0) url("picture.jpg") repeat scroll 0 0; 
    border-radius: 30px; 
    border-top: 0 none; 
    display: block; 
    margin: -60px auto; 
    padding: 0; 
}

[here the screenshot][checked]

出典

2017-01-21 17:06:46

ねえ！私はこれを試しましたが、写真を左に動かすだけでした。空白はまだそこにあります。 – Kat

私はこれをチェックしています。） –

＃profile-pic { 背景：rgba（0、0、0、0）url（ "picture.jpg"）繰り返しスクロール0 0; border-radius：30px; border-top：0 none; display：ブロック; マージン：-60px auto; パディング：0; } –

最初のヘッダーの後に、私のヘッダーと私のdivの間の空白を変更するにはどうすればよいですか？

答えて

関連する問題