Question

当我尝试为div创建一个HTML背景颜色时，最终会在底部留下大量的额外空间 - 我想制作一种标题，但它变得非常宽。有人可以帮我这个吗？

我的HTML

<div class="header">
    <h1>Welcome to My Site</h1>
</div>

我的CSS是

div.header{
  background-color:grey;
}

谢谢！

Answer 1

我建议为代码添加宽度，高度和边距。您可以使用codepen.io这样的网站试验您的代码！以下是我正在谈论的一个例子的链接。

https://codepen.io/wykydtronik/pen/VpEGer

div.header{
  background-color:grey;
  width: 350px;
  height: 150px;
  margin: 0 auto;
}

如果您查看CSS代码，您会看到我设置的宽度为350px，高度为150px。我还添加了一个保证金：0自动;使标题div成为中心。这是一个巧妙的技巧，直到你看过几次都不直观。

如果这有帮助，请告诉我，祝你好运！

Answer 2

我建议你使用bootstrap，有很多社区支持和文档，你甚至可以为自己覆盖颜色和样式。

Bootstrap well class可以为你效劳。

<div class="well">
  Look, I'm in a well!
</div>

或者更大的影响力。

<div class="jumbotron">
  <h1>Jumbotron</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>

HTML5背景颜色填充太大

2 个答案: