删除空白和更漂亮的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时，就会发生某些事情。 这种简化只是为了使您更轻松。