如何在HTML/CSS中改变字体大小而不改变div大小？

Question

如何在HTML/CSS中改变字体大小而不改变div大小？

8

当我更改div（id ="home"）中的文本大小时，它还会更改div的大小。我希望能够在不影响div大小的情况下更改文本大小。

以下是HTML：

<!DOCTYPE html>
<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
        <link type="html/css" rel="stylesheet" href="websiteCSS.css"/>
        <title>PROTOTYPE</title>
    </head>
    <body>
        <div id="sidebar"></div>
        <div id="home" class="header">Home</div>
    </body>
</html>

以及CSS：

body{
    margin: 0; 
    background: #d5e9d7;
}

#sidebar {
    z-index: 1;
    position: fixed;
    width: 20%;
    height: 100%;
    margin-top: 0;
    margin-left: 0;
    #background-color: light blue;
    background-image: linear-gradient(to bottom, #545454 0%, #424242 100%);
    margin-bottom: 10px;
}

.header {
    position: fixed;
    width: 2.5em;
    height: 1em;
    padding: 8px;
    background-color: #b2b2b2;
    margin-top: 0.5%;
    margin-left: 20.5%;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2em;
    color: #333333;
}

.header:hover {
    font-size: 2.1em;
}

- user2540862

我遇到了类似的问题。我无法预先确定我的 div 高度。我需要将其设置为如果字体已经那么大时的高度。我在使用悬停效果来增加字体大小。 - Nikhil VJ

2个回答

0

将容器 div 的宽度和高度设置为能够容纳最坏情况（最大）的字体大小。这将防止 div 根据字体大小重新调整大小。

- jonosma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sebu · Accepted Answer

你可以使用px设置

的尺寸，或者设置min-width或min-height属性。