Question

在我的网站中，一个paragrap（位于标题内）由数字（即电话号码）和一些文本（即电子邮件加法器）组成。现在我已将其包含在一个相同的段落中，设置它们的font-size：small。但问题是在我的浏览器中，数字看起来比文本大一些（在我的情况下是电子邮件地址）。为什么这样？如何使它们看起来与文本大小相同（可能会减小数字的大小？）？这就是它现在的样子：

enter image description here

.HTML：

<div id="header_area">

                <h1>


                    7seas Redovisning
                            <p id="contact_address_header">
                        Mob: 076-000000<br /> Tel: 000000<br />
                            info@7abcdefgh.se

                            </p>
                </h1>

        </div>

.CSS：

#header_area{
    background-image: url('img_ain/7seas.jpeg'), 

                     url('img_ain/7seas.jpeg');

    background-repeat: no-repeat, 

                       no-repeat;

    background-position: 220px top;
    margin-top:10px;

    }
h1{
    text-align:center;
    /*
    margin-top:55px;
    */

    color:green;

    border-bottom:2px solid Crimson ;


    box-shadow: 2px 2px 2px yellow;

    padding-bottom:40px;
    padding-top:45px;
    font-family:Prisoner SF;

}


    #contact_address_header{

    float:right;
    margin-right:40px;
    margin-top:-15px;
    color:#6495ED;
    font-size: small;
    font-family:Euphemia;

    }

Answer 1

实际上，数字和字母表的字体大小相同，但如果您仍想减少数字的字体大小，则可以使用<span></span>标记包装数字像这样：

            <h1>


                7seas Redovisning
                        <p id="contact_address_header">
                    Mob: <span class="numbers">076-000000</span><br /> Tel: <span class="numbers">000000</span><br />
                        info@7abcdefgh.se

                        </p>
            </h1>

然后为span标记设置不同的字体大小，如下所示：

#contact_address_header{
    font-size: small;
}
.numbers {
    font-size: 10px; 
}

顺便说一句，我不了解您的要求，但使用<p>标记中的<h1>标记并非有效 HTML。

＆＃13;

#contact_address_header {
  font-size: small;
}
.numbers {
  font-size: 10px;
}

＆＃13;

<h1>
                7seas Redovisning
                        <p id="contact_address_header">
                    Mob: <span class="numbers">076-000000</span><br /> Tel: <span class="numbers">000000</span><br />                     info@7abcdefgh.se

                        </p>
            </h1>

＆＃13;

如何增加 - 减少CSS中的数量（即0,1.4 ..）大小？

1 个答案: