CSS设置font-size属性不生效 如何修改HTML网页文本大小

问题原因 #

你设置的font-size不生效的核心原因是HTML代码语法错误：所有<img>标签都缺失了闭合用的右尖括号>，浏览器解析DOM结构时会将后续的<p>标签识别为<img>标签的属性内容，不会将其作为独立的段落元素渲染，你写的p标签样式规则自然无法匹配到对应元素。

比如你写的这段代码：

<img src="/images/dog1.jpg"
<p>This is dog 1</p>

浏览器会把整段识别成一个未闭合的img元素，p标签不会被正常解析。

修复方法 #

给所有img标签补全右尖括号即可，修正后的HTML代码参考：

<!DOCTYPE html>
<html lang="en">

<head>
    <title> Flexbox in HTML</title>
    <link rel="stylesheet" href="flexbox.css">

</head>

<body>
    <div class="outer">
        <div class="inner">
            <img src="/images/dog1.jpg">
            <p>This is dog 1</p>
        </div>
        <div class="inner">
            <img src="/images/dog2.jpg">
            <p>This is dog 2</p>
        </div>
        <div class="inner">
            <img src="/images/dog3.jpg">
            <p>This is dog 3</p>
        </div>
        <div class="inner">
            <img src="/images/dog4.jpg">
            <p>This is dog 4</p>
        </div>
    </div>
</body>
</html>

修复后你设置的font-size规则就会正常生效。如果修改后仍有异常，可以打开浏览器开发者工具（按F12）的元素面板，查看对应p元素的样式继承和覆盖情况，排查是否有其他更高优先级的样式覆盖了你的设置。

内容的提问来源于stack exchange，提问作者Programming 55