刪除空白和更漂亮的CSS

Question

我僅使用html5和css（3）從頭開始創建了自己的靜態網站。但是我遇到了2個問題。

第一個是頂部菜單和標題圖像底部之間的空白。我已經嘗試了所有方法。

也許唯一的解決方案是float:left; 但隨后圖像進入了導航標簽或margin屬性的負值，但我聽說這種技術不好。

我將通過圖像http://www.filedropper.com/discoversite顯示第二個問題 ，這是我的簡單WebSite。 我知道我的CSS很糟糕，但我仍然是初學者。 第二個問題在這里。 http://postimg.org/image/5adp6379d/ 。 如您所見，文本已開箱即用。 （我在CSS中使用%來提高響應速度）。 如果有人可以幫助我，我將非常高興。

Answer 1

1. 我只能猜測第一個問題，因為我不知道您網站的確切代碼（創建jsfiddle：D）。 嘗試應用vertical-align: bottom; 或display: block; 到標題圖片。 為什么？ 因為圖像的位置像文本一樣，並且某些字母（例如g ， j ， q和p）位於最下面。 您的瀏覽器將為這些字母留出很小的空間。 像Kirk Logan所說的那樣，設置min-width也是一個很好的解決方案。

2. 對於第二個問題，有多種解決方案（取決於您想要的）：

   • 您可以通過以下方式處理內容overflow: hidden; 或overflow: scroll按照Kirk Logan的建議overflow: scroll 。 但這對您在圖片中向我們展示的情況沒有任何意義。

   • 或者（稍微復雜一點），您可以刪除左側和右側的白色邊框（僅當屏幕太小時），以獲取更多的文本空間。 這可以通過以下方式完成：

      @media only screen and (max-width: 768px) { #BigBorder1 { border-width: 0px; } #BigBorder2 { border-width: 0px; } } 

僅當屏幕寬度小於768像素時，才會應用外部括號內的所有內容。 但老實說，這通常是相反的：當屏幕大於768px時，就會發生某些事情。 這種簡化只是為了使您更輕松。