Question

我是HTML的新手，我试图复制Google的主页以供练习。
我的代码是这样的：

＆＃13;

<div align="right" style="border: 1px solid">
  <a href="">Gmail</a>&nbsp;&nbsp;<a href="">Images</a>&nbsp;&nbsp;<a href="">Sign in</a>
</div>
<!-- Google Text -->
<div align="center" style="font-size: 500%; border: 1px solid">
  <font color="#4885ed">G</font>
  <font color="#db3236">o</font>
  <font color="#f4c20d">o</font>
  <font color="#4885ed">g</font>
  <font color="#3cba54">l</font>
  <font color="#db3236">e</font>
</div>
<div align="center" style="font-size: 500%; border: 1px solid">
  <input type="Text" size="50" />
</div>
<div align="center" style="font-size: 500%; border: 1px solid">
  <input type="button" value="Search" size="100" />&nbsp;&nbsp;<input type="button" value="I'm feeling lucky" size="100" />
</div>

＆＃13;

我得到了以下输出：

Output Screenshot

我没理解为什么TextBox上方和按钮上方有空间。如何删除这些空格？

任何帮助都将不胜感激。

的问候，
帕里克希特

Answer 1

您已设置font-size: 500%，因此线条高度（输入中的线条位于基线上）非常高。

不要那样做。

Answer 2

为了避免在使用浏览器显示时遇到基本css样式的任何问题，请在每次使用css时尝试使用此功能：

CSS：

*{
    padding:0px;
    margin:0px;
    border:solid black 0px;
    color:#5f5;
    text-decoration:none;
    box-sizing:border-box;
    overflow-x:hidden;
}

这是一个很好的方法，因为这有助于更好地控制您希望页面看起来如何唯一的缺点是使用这意味着您可能必须将此处的属性再次设置为其他css样式，因为这会影响所有内容。

看起来似乎太多但从长远来看可以提供帮助。

html

2 个答案: