html - CSS 1em 改变浏览器默认行高

标签 html css

我有一个 CSS 文件。使用 line-height: 1em; 属性,文本看起来像这样:

enter image description here

如果没有该属性,它看起来像这样:

enter image description here

1em 应该等于它已经存在的值,但是如果你仔细观察,你会发现它们是不同的。为什么这些显示不同?

body {
  color: green;
  font-family: Verdana, Arial, Geneva, Arial Black;
  font-weight: normal;
  background-color: #ffcf79;
  font-size: 25px;      
}
h1 {
  text-decoration: underline;
  font-size: 150%;
}
h2 {
  text-decoration: underline;
  font-size: 1.2em;
}
p.para1 {color: blue;}
p.para2 {color: purple;}
p.para3 {
  color: purple;
  font-size: 15px;
  line-height: 1.5em;
  background-color: #e5e4d7;
  padding: 20px;
  border-color: black;
  border-width: 2px;
  border-style: solid;
}
p.para4 {
  color: black;
  font-size: 15px;
  line-height: 1.5em;
  background-color: #e5e4d7;
  padding: 20px;
  border-color: black;
  border-width: 2px;
  border-style: solid;
  margin: 20px;
  margin-top: 50px;
  margin-left: 400px;       
}
.imagec {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 3px;
  background-color: silver;
  border-color: black;
  border-style: solid;
}
<body>
  <h1> The Fish Web Site </h1>
  <p class="para1"> Welcome to the Fish Web Site. Everything you want to know about fish is in this web site. </p>
  <img class="imagec" src="_images/barracuda.jpg">
  <h2> This is a section on Bass fish </h2>
  <p class="para2"> Bass fish live in lakes.  The word for fish in Latin is <i>Pisces</i>  </p>
  <p class="para3"> A fish is any member of a paraphyletic group of organisms that consist of all gill-bearing aquatic craniate animals that lack limbs with digits. Included in this definition are the living hagfish, lampreys, and cartilaginous and bony fish, as well as various extinct related groups. Most fish are ectothermic ("cold-blooded"), allowing their body temperatures to vary as ambient temperatures change, though some of the large active swimmers like white shark and tuna can hold a higher core temperature. Fish are abundant in most bodies of water. They can be found in nearly all aquatic environments, from high mountain streams (e.g., char and gudgeon) to the abyssal and even hadal depths of the deepest oceans (e.g., gulpers and anglerfish). At 32,000 species, fish exhibit greater species diversity than any other group of vertebrates.</p>
  <p class="para4"> A fish is any member of a paraphyletic group of organisms that consist of all gill-bearing aquatic craniate animals that lack limbs with digits. Included in this definition are the living hagfish, lampreys, and cartilaginous and bony fish, 
  as well as various extinct related groups. Most fish are ectothermic ("cold-blooded"), allowing their body temperatures to vary as ambient temperatures change, though some of the large active swimmers like white shark and tuna can hold a higher core temperature. Fish are abundant in most bodies of water. They can be found in nearly all aquatic environments, from high mountain streams (e.g., char and gudgeon) to the abyssal and even hadal depths of the deepest oceans (e.g., gulpers and anglerfish). At 32,000 species, fish exhibit greater species diversity than any other group of vertebrates.</p>
</body>

最佳答案

我看不出浏览器有 1em 的默认行高的原因,因为在大多数情况下,两行之间没有空格只会导致可读性差。以下是我可以从官方来源找到的内容:

Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family. [MDN/line-height]

关于html - CSS 1em 改变浏览器默认行高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43033167/

相关文章:

jquery - 中央栏为 : hide what's outside this column 的网站

css - Kendo Grid 颜色动态变化

javascript - 使用CSS定位元素

html - 在固定宽度的 div 内移动固定宽度的表格

jquery - 鼠标悬停时交叉淡入淡出 div

javascript - knockoutJS动态改变foreach绑定(bind)

html - 如何将标题放在图像下方的一行中?

html - 当它位于 div 标签中的句子中间时如何转到下一行?

php - 跟踪图片 src 标签的印象

html - 使 div 占据上面同级的动态宽度,同时保持流量