Question

我一直在编写一个学校项目的编码，我遇到了这个问题，我想要一个没有广泛的标题。我是Stack Overflow的新手，我希望我不会问一个非常愚蠢的问题，但是我在事先搜索时没有找到答案。

我的代码如下所示：

h5 {
  margin-top: 50px;
  margin-right: 150px;
  margin-left: 80px;
  text-align: center;
  font-size: 16;
  font-family: Calibri;
}

<h5> <img id="img" src="image0.jpg" height="350" width="600"> <br> Pictures are symbolic. </h5>

是否有强制css使命令缩小的命令？或者我需要使用其他东西吗？

编辑：我找到了一个更简单的解决方案，只需不使用标题（并直接在html中添加代码），感谢帮助过的人。

Answer 1

如果我猜你在谈论h5的保证金属性，那么缩小范围？好吧，我修改你的CSS，看看它是否为你服务和描述，边距是外部物体和边界之间的距离; 填充是边框内的空间和

中的数据

＆＃13;

h5 {
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    text-align: center;
    font-size: 16;
    font-family: Calibri;
}

//inserting your image css into here rather than in html
#img
{
height:auto;
width:100%;
}

＆＃13;

<img id="img" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?w=640&ssl=1"> <br>

    <h5> Pictures are symbolic. </h5>

＆＃13;

Answer 2

如果缩小了标题内的文字，你的意思会缩小。

你可以使用的 transform: scaleX(0.7);

＆＃13;
＆＃13;
h5 { margin-top: 50px; margin-right: 150px; margin-left: 80px; text-align: center; font-family: Calibri; font-size: 16; } h5 span{ display:block; transform: scaleX(0.8);/*This one here to scale the text*/ }
＆＃13;
<h5> <img id="img" src="image0.jpg" height="350" width="600"><br> <span>Pictures are symbolic.</span> </h5>
＆＃13;
＆＃13;
＆＃13;

或像
这样的窄字体
font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;

或font-stretch property

Answer 3

要使h5中的文字不是粗体，您只需将font-weight: normal;添加到css。

或者，由于您已经在使用font-size和font-family，因此可以使用font简写：

font: 16px 'Calibri';

这是

的缩写

font-weight: normal; font-size: 16px; font-family: 'Calibri';

结果：

h5 {
  margin-top: 50px;
  margin-right: 150px;
  margin-left: 80px;
  text-align: center;
  font: 16px 'Calibri'; /* here */
}

<h5> <img id="img" src="image0.jpg" height="350" width="600"> <br> Pictures are symbolic. </h5>

请注意，CSS中的字体大小也有16。我将其更正为16px，因此您可能会发现尺寸不同！

HTML标题：如何缩小文字范围（不宽）？

3 个答案: