以HTML格式調整標籤元素的行高

我有一個包裝<label>元素的表單，但<label>的兩行之間的空格太大，我似乎無法調整行的高度<label>。以HTML格式調整標籤元素的行高

這裏是一個<label>和<p>，都與施加相同的CSS的示例。正如你所看到的，<p>調整正確，而<label>保持不變。

CODE：

form label, 
 
form p 
 
{  
 
    font-weight:bold; 
 
    line-height:.7em; 
 
}

<form style="width:200px;"> 
 
    <fieldset> 
 
     <label for="textarea">In ten or fewer words, explain American history</label> 
 
     <p>In ten or fewer words, explain American history</p> 
 
     <textarea name="textarea" rows="5" ></textarea> 
 
    </fieldset> 
 
</form>

來源

2011-06-05 Yarin

所有的HTML標籤，將工作被分類的類別描述其性質。這種分類可能與語義，行爲，交互和許多其他方面有關。

兩個p和label標籤歸類於「流動內容」標籤類別。但是，之間有一個細微的差別：label標籤也被歸類爲「短語內容」類別。

什麼這一切意味着在實踐中？瀏覽器默認呈現將遵循指定的標記分類，並會將該p標籤作爲一個塊元件，而label標籤將默認，可以稱爲在線元件處理。您可以通過覆蓋默認的CSS規則來修改此內容：只需告訴瀏覽器您希望label呈現爲塊元素。

label { 
    display: block; 
}

你必須這樣做，因爲這是內聯元素（顯示：內聯）不能有像height性質，line-height，margin-top，margin-bottom（它們將被忽略）。

如果你想要一個內聯元素的高度屬性，但仍保持它與它的在線行爲（無故換行），你可以聲明爲：

label{ 
display:inline-block; 
}

它總是好的採取閱讀HTML的文檔。它可以爲您節省大量的時間，特別是在處理這些小怪癖時。

來源

2011-06-05 22:49:26 marcio

佈局方式 - 顯示：block;確實是問題 - 謝謝 – Yarin 2011-06-05 23:54:39

不完全知道爲什麼，但如果你在標籤上設置display: block;

來源

2011-06-05 21:57:16 Fredrik

我認爲什麼是馬爾西奧想說的是，在inline元素（如span S或label S），可陸續在文本駐留一個，你不能指定適用於整個段落屬性。

顯而易見的是text-align：段落應指定對齊而不是個別span s。如line-height等。

的相對的inline元素是block元件等div或p佔據一個頁面上的正方形，並在較高的塊級彼此之間佈置。此行爲由CSS屬性display控制，使用div的行爲就像span，反之亦然。

來源

2011-06-05 22:59:12 Gman

以HTML格式調整標籤元素的行高

回答

相關問題