Question

我试图让我的标题和图像完全排在同一条线上，但我遇到了困难。任何人都可以看到为什么/建议修复？

<!DOCTYPE html>
<html>
<head>
<style>
#header img {
  position: relative;
  width: 75px;
  height: 75px;
}
#header h1 {
  color: white;
    float: left;
  background-color:#006890;
  font: 75px arial, sans-serif;
}
</style>
</head>
<body>

<div id="header">
<h1>Header</h1>
  <img src="2000px-Smiley.svg.png" alt="Smiley Face" >
</div>
</body>
</html>

Answer 1

这是因为h1的默认保证金，你看到了吗？元素带有默认样式，您需要根据需要对其进行自定义，通常是您希望从h1中删除margin-top所需的内容，但如果您不需要margin: 0;，也可以将其设置为margin-bottom {1}}。

#header h1
{
    color: white;
    float: left;
    background-color:#006890;
    font: 75px arial, sans-serif;
    margin: 0;
}

示例：http://jsfiddle.net/L2e1rL6L/

Answer 2

除了#header h1 css，你应该做

#header h1 {
 margin:0;
}

就是这样。

Answer 3

您是否需要在<h1><img > </h1>代码中包含图片？

使图像显示在与标题相同的行上

3 个答案: