为什么在浏览器中运行时我的网页底部有空白？
我在Vs代码中创建了一个网页。然后我从google-font中选择一种字体并将其链接嵌入HTML 的 head 标签中。然后在 CSS 中添加字体系列。它工作正常。当我在实时服务器扩展中测试网页时。我注意到每当我在 CSS 中写一个字符时，页面 就会晃动很大。当我停止编写代码时，震动就会停止。在摇动过程中，字体无缘无故地变得更大、更小、更暗等，尽管我没有对字体做任何事情。这背后的问题是什么？如何停止这种晃动？
body{
font-family: 'Girassol', cursive;
font-size:25px;
}
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Menu design</title>
<link
href="https://fonts.googleapis.com/css2?family=Girassol&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="indexstyle.css" />
<script src="try.js"></script>
</head>
<body>
<p>
The University was established as compensation for the annulment of the
1905 Partition of Bengal. The partition had established East Bengal and
Assam as a separate province, with Dhaka as its capital. However, the
partition was abolished in 1911. In 1913, public opinion was solicited
before the university scheme was given its final shape, and the Secretary
of State approved it in December 1913.[1] The first vice-chancellor of the
university was Philip Joseph Hartog, who had been academic registrar of
the University of London for 17 years.[
</p>
</body>
</html>
慕的地82710181回答
-
互换的青春
是的，我观察到底部出现空白。这是因为 body 标签内的元素没有占用完整的可用 body 大小。元素高度为 body- 722 header- 104 .showcase- 251 enter code here .info-bar- 201 .testimonials- ~71 footer- ~62底部的空白区域是视口的剩余区域。如果你缩小浏览器，空白就会消失。要解决此问题，您可以在正文中使用以下 css。body {font-family: Tahoma, Verdana, Segoe;font-size: 15px;line-height: 1.5;padding: 0;margin: 0;background-color: #ffffff;/* Add below lines*/display: flex;flex-direction: column;align-items: stretch;}
随时随地看视频慕课网APP
相关分类
Html5