为什么我的 css 不适用于我的下一个 div？答案

【问题标题】：Why isn't my css applying to my next divs?为什么我的 css 不适用于我的下一个 div？
【发布时间】：2017-05-29 23:27:32
【问题描述】：

有人能告诉我为什么我可以设置标题类的样式，但不能设置我的 MainContent 类吗？仅显示 Lorum Ipsum 文本。 maincontent div 不显示任何宽度、高度或颜色。感谢您的帮助！

.header {
    width: 100%;
    height: 90px;
    background-color: blue;
}

.header img {
 height: 80%;
 margin-top: 10px;
 margin-left: 260px;
}

.MainContent {
    width: 100%;
    height: 80%;
    background-color: yellow;
}

<div class="header">
	<img src="img/epic_it.png" alt="epicit logo">
	<nav></nav>
</div>

<div class="MainContent">
	<h1>
	Lorem ipsum
	</h1>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

在 .header img 声明的末尾有一段非常奇怪的标记，它被认为是 CodeMirror invalid character，并导致其后的任何 CSS 中断。如果你编辑你的 sn-p，你会在那里看到一个红色圆圈，尽管它在 sn-p 预览中是不可见的。

只需删除即可解决问题：

.header {
  width: 100%;
  height: 90px;
  background-color: blue;
}

.header img {
  height: 80%;
  margin-top: 10px;
  margin-left: 260px;
}

.MainContent {
  width: 100%;
  height: 80%;
  background-color: yellow;
}

<div class="header">
  <img src="img/epic_it.png" alt="epicit logo">
</div>

<div class="MainContent">
  <h1>
    Lorem ipsum
  </h1>
</div>

希望这会有所帮助！ :)

【讨论】：

非常感谢！这解决了我的问题:)
很高兴听到此解决方案似乎对您有用。一旦您确认此解决方案解决了您的问题，请不要忘记通过单击投票按钮下方的灰色复选标记来将解决方案标记为正确 - 这会将其从“未回答的问题”队列中删除，并为双方授予声誉提问者和回答者。当然，这么说，您没有义务将我的答案（或任何其他答案）标记为正确，尽管这确实有助于保持事情顺利进行:)
img 标签需要一个结束标签
@ZohirSalakCeNa - 实际上，<img> tag 特别必须不有一个结束标签；它是 15 个empty elements 之一（意味着它不能包含任何子节点）。