同一行內(nèi) 不同字體大小的文本底部對齊

Sike 發(fā)布于2019-08-30 15:44 / 2370人閱讀

摘要：核心思想是將每個大小的字體多帶帶作為獨立的行，多帶帶設(shè)置，而不是在同一行這樣就解決了

核心思想是將每個大小的字體多帶帶作為獨立的行，多帶帶設(shè)置line-height，而不是在同一行

HTML

CSS

.a {
    display: flex;
    height: 40px;
}

.b {
    height: 100%
}

.c {
    font-size: 20px;
    line-height: 30px;
}

.d {
    font-size: 25px;
    line-height: 32px;
}

.e {
    font-size: 35px;
    line-height: 40px;
}

這樣就解決了

GPU云服務(wù)器云服務(wù)器底部對齊的代碼 html文本的對齊 html外邊底部對齊不同域名指向同一網(wǎng)站

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116094.html

相關(guān)文章

同一行內(nèi) 不同字體大小的文本底部對齊

摘要：核心思想是將每個大小的字體單獨作為獨立的行，單獨設(shè)置，而不是在同一行這樣就解決了核心思想是將每個大小的字體單獨作為獨立的行，單獨設(shè)置line-height，而不是在同一行 HTML CSS .a { display: flex; height: 40px; } .b { height: 100% } .c { fo...

livem 2019-08-02 15:36 評論0 收藏0
CSS字體和文本相關(guān)

摘要：本博文主要分為兩部分，第一部分介紹字體屬性，第二部分則介紹了文本常用屬性二字體屬性字體系列首先介紹一下什么是字體系列所謂字體系列我理解的就同一字體下的不同風(fēng)格的具體字體的集合。這里的楷體，就可以看做是一個單獨的字體系列。一前言目前在做IFE的練習(xí)，初步學(xué)習(xí)到CSS內(nèi)容，所以做了總結(jié)。本博文主要分為兩部分，第一部分介紹CSS字體屬性，第二部分則介紹了文本常用屬性二字體屬性 2....

xiaokai 2019-08-30 15:54 評論0 收藏0
行內(nèi)格式化上下文(Inline formatting contexts)

摘要：如果該屬性值為，用戶代理可能會拉伸行內(nèi)盒不包括和盒里的空白和字間距與，，行內(nèi)盒一個是一個特殊的行內(nèi)級盒，其內(nèi)容參與了它的包含行內(nèi)格式化上下文當(dāng)一個超出一個的寬度時，它會被分成幾個盒，并且這些盒會跨多分布。 IFC布局規(guī)則: 在一個行內(nèi)格式化上下文中，盒是一個接一個水平放置的，從包含塊的頂部開始這些盒之間的水平margin，border和padding都有效盒可能以不同的方式豎直對...

impig33 2019-08-29 12:32 評論0 收藏0
line box，inline box及vertical-align分析

摘要：的邊界是該行內(nèi)的最高點和最低點，即的頂部邊緣是該行內(nèi)最高的頂部邊緣，底部邊緣是該行內(nèi)最底的底部邊緣。是垂直對齊發(fā)生的區(qū)域。將文本去掉，會發(fā)現(xiàn)父元素高度不變。元素的基線通過絕對長度相對于的基線進(jìn)行偏移。一、適用元素 vertical-align適用于inline-level元素，即inline,inline-block或inline-table 。二、inline與inline-bl...

Pocher 2019-08-29 12:14 評論0 收藏0
line box，inline box及vertical-align分析

摘要：的邊界是該行內(nèi)的最高點和最低點，即的頂部邊緣是該行內(nèi)最高的頂部邊緣，底部邊緣是該行內(nèi)最底的底部邊緣。是垂直對齊發(fā)生的區(qū)域。將文本去掉，會發(fā)現(xiàn)父元素高度不變。元素的基線通過絕對長度相對于的基線進(jìn)行偏移。一、適用元素 vertical-align適用于inline-level元素，即inline,inline-block或inline-table 。二、inline與inline-bl...

cocopeak 2019-08-01 16:31 評論0 收藏0