html - 为什么 在 HTML 中的厚度与 CSS 不同？

Question

我有一个带有内联 CSS 的 HTML 文档，我的教授要求在 head 标签中包含 CSS，并且与带有内联 CSS 的原始 HTML 具有相同的渲染。我想我已经完成了，但不知何故 <hr>在带有内联 CSS 的 HTML 中看起来比另一个更厚。

我已经尝试添加 height:声明属性，但它呈现的比我想要的还要厚。

原始 HTML:http://jsfiddle.net/2k66T/

修改后的 HTML:http://jsfiddle.net/dd63m/

---

编辑:这是教授的指示；

Write a CSS document in order to define the style of the following web page (I refer this to as "Original HTML") in a right way. Add and erase in the original page everything you think that is necessary. Use the on-line validator of the World Wide Web Consortium to be sure that your work fulfills the standards.

Answer 1

真正的问题是...您为什么使用 HR？

让我们在包裹您的 Logo 图像的 div 上渲染一个边框。

来一把 fiddle ! - http://jsfiddle.net/dd63m/11/

更新 fiddle - http://jsfiddle.net/8VTd8/3/

我已经为包装您的 Logo 的 div 提供了 Logo ID。我删除了 br break 标签，我们可以在 CSS 中应用边距。不再使用字体标签。

HTML

  <h1>MyTSC</h1>

<div id="logo"> 
  <a href="http://www.tsc.edu"><img src="./img/TSCLogo.jpg" alt="TSC"></a>
</div>


<h2>My courses for Fal 2013</h2>
<ul>
 <li>COSC 4330 Computer Graphics</li>
 <li>IMED 1416 Wed Design I</li>
 <li>ITNW 2413 Networking Hardware</li>
</ul>

logo div目前是300px宽，改成你想要的。注意: margin :0 自动；本质上这是居中你的 div。 margin-bottom 用于创建这些额外的空间。边框应用于您的 Logo div，在浏览器中提供一致的线条。

CSS

body{
  background-color: grey;
  color: white;
}
h1{
  text-align: right;
margin-bottom: 30px;
}
div{
  text-align: center
}

ul{
  font-style: italic;
}

#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}