減少徽標和它下面的元素之間的空間

因此，我正在爲我的班級構建此網站，教授建議我應將我的徽標放在我網站的左上角。有些人非常友好地幫助我放置徽標，但徽標下面的空間和英雄橫幅上方的空間太大，我試圖通過在CSS中使用填充來減少空間，但它不起作用。減少徽標和它下面的元素之間的空間

這是頭當前編碼：

<header role="banner" id="home" class="site-header"> 
<div class="container container--max"> 
    <h1 class="site-header__title"> 
    <a href="#home"><img src="images/logo2.png"></a> 
    </h1> <!-- end .site-header__title -->

這是我的網站：http://gabrielr.sgedu.site/final-project任何提示/幫助？

來源

2016-08-03 Gabi Rodríguez

關於這個網站，你覺得有用的答案，[考慮的給予好評和/或對勾（http://stackoverflow.com/help/someone-answers）。沒有義務。只是提高質量內容的一種方式。歡迎來到堆棧溢出！ –

-1

您可以添加上填充了.site-header__title：

eg.site-header__title { padding: 5px 0 0 0; }

或者你可以設置.site-header class高度。

來源

2016-08-03 04:34:55

您的徽標嵌套在一個h1元素中，該元素通常帶有頂部和底部邊距空間。

您可以通過調節上h1邊緣控制從英雄形象標誌的距離。

開始與此：

header > .container > h1 { margin: 0; }

這看起來不錯：

header > .container > h1 { margin: .5em 0; }

來源

2016-08-03 04:35:04

感謝您的回覆。我真的很感謝 –

集所需的保證金在下面類

.site-header__title 
{ 
    margin:10px; 
}

來源

2016-08-03 04:35:49

的答案以上都已經很好，所以才供您參考...

如果您使用的是Firefox或Chrome，則可以按F12並打開開發者控制檯;從那裏可以很容易地在CSS中進行格式化並找出在進行編輯和上傳之前更改你想要的CSS。

如您所見，您可以很容易地看到容器盒的外觀，以及邊距和填充距離;還可以在瀏覽器中測試不同的值，以便在提交編輯器和FTP之前解決它看起來的樣子。

我發現這個過程是一個更快的爲什麼消除顯示錯誤和佈局問題。

如果您發現它很有用，並且您開始使用Javascript/jQuery，請考慮使調試AJAX的Firebug插件也更加容易。您也可以在瀏覽器中進行所有常規的CSS操作。

給那個工作流程一試;我個人覺得它快得多。祝你好運！

來源

2016-08-03 04:51:55 AdheneManx

我剛剛做了另一個修改，它非常有幫助。非常感謝你的見解！ –

太棒了:-)很高興幫助...這些天我在瀏覽器中做了很多CSS！如果Firefox也可以將開發人員窗口中的CSS代碼直接複製/粘貼到HTML/CSS編輯器中。 – AdheneManx

也正在考慮使用CSS重置腳本： http://meyerweb.com/eric/tools/css/reset/ 這樣的事情會給你一個公平的競爭環境，所以你指定所有你自己的填充和邊距。這個想法是將所有東西都置零，這樣所有瀏覽器的最終結果都是一樣的。 – AdheneManx

將height添加到您的.site_header，這樣可以減少您在徽標和以上視頻下方的間距。

.site-header { 
    height:85px; 
    background: #29272C; 
}

來源

2016-08-03 05:13:02 frnt

謝謝！ :)這實際上非常有幫助！ –

歡迎@GabiRodríguez，如果它工作，然後確實接受答案。 – frnt

減少徽標和它下面的元素之間的空間

回答

相關問題