將跨度內的文本對齊到容器頂部

有沒有辦法讓文本開始在其跨度的非常高的邊界？將跨度內的文本對齊到容器頂部

在這裏你可以看到有一個「填充」由於行高。有沒有辦法做到這一點？

.name { 
 
    display: inline-block; 
 
    line-height: 1.25; 
 
    font-size: 45px; 
 
} 
 
.firstname { 
 
    display: block; 
 
    background: #FFAACC; 
 
    margin-bottom: 5px; 
 
}

<div> 
 
    <div class="ej ej1"> 
 
    <span class="name"> 
 
     <span class="firstname">Something Name</span> 
 
    <span class="username"> 
 
     @somthig-name 
 
     </span> 
 
    </span> 
 
    </div> 
 
</div>

來源

2017-02-14 Óscar

不知道你的意思由於行高，「小」填充「。」這是我在拼圖上的。

body { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.name { 
 
    margin-top:-0.9rem; 
 
    display: inline-block; 
 
    line-height: 1.25; 
 
    font-size: 45px; 
 
} 
 
.firstname { 
 
    display: block; 
 
    background: #FFAACC; 
 
    margin-bottom: 5px; 
 
}

<div> 
 
     <div class="ej ej1"> 
 
     <span class="name"> 
 
      <span class="firstname">Something Name</span> 
 
     <span class="username"> 
 
      @somthig-name 
 
      </span> 
 
     </span> 
 
     </div> 
 
    </div>

來源

2017-02-14 02:41:08 GCL

我相信問題是<body>有8像素... 的保證金試試這個

.name { 
 
    display: inline-block; 
 
    line-height: 1.25; 
 
    font-size: 45px; 
 
} 
 
.firstname { 
 
    display: block; 
 
    background: #FFAACC; 
 
    margin-bottom: 5px; 
 
}

<body style="margin:0px;"> 
 
<div> 
 
    <div class="ej ej1"> 
 
    <span class="name"> 
 
     <span class="firstname">Something Name</span> 
 
    <span class="username"> 
 
     @somthig-name 
 
     </span> 
 
    </span> 
 
    </div> 
 
</div> 
 
</body>

來源

2017-02-14 02:35:43 Inkdot

Otherwirse如果你在談論文本本身，我認爲，與字體本身，做你將不得不在字符上方創建一個絕對沒有空格的字體。 – Inkdot

您是否嘗試完全刪除線條高度？ – Inkdot

爲了實現你的要求的東西，如果你手動更改行高爲每個HTML標記纔是可能的。這就是你正在尋找我的確切的事情，所以想..

.name { 
 
    display: inline-block; 
 
    line-height: 33px; 
 
    font-size: 45px; 
 
} 
 
.firstname { 
 
    display: block; 
 
    background: #FFAACC; 
 
    margin-bottom: 5px; 
 
    padding-bottom:10px; 
 
    margin-top:10px; 
 
}

<body style="margin:0px;"> 
 
<div> 
 
    <div class="ej ej1"> 
 
    <span class="name"> 
 
     <span class="firstname">Something Name</span> 
 
    <span class="username"> 
 
     @somthig-name 
 
     </span> 
 
    </span> 
 
    </div> 
 
</div> 
 
</body>

來源

2017-02-14 05:25:10 Sam

將跨度內的文本對齊到容器頂部

回答

相關問題