鍍金池/ 問(wèn)答/HTML/ div里放入文本域?yàn)楹味喑鲆粋€(gè)空行

div里放入文本域?yàn)楹味喑鲆粋€(gè)空行

圖片描述
textarea下面這個(gè)空行為何出現(xiàn)。一般大家遇到這個(gè)怎么優(yōu)雅的去掉空行（除了margin）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div>
    <textarea>hello</textarea>
  </div>
  <style type="text/css">
    div {
      border: solid;
    }
  </style>
</body>
</html>
回答
編輯回答
筱饞貓

line-height: 0;

2018年4月14日 16:52
編輯回答
櫻花霓

不僅僅是 textarea ，img 這種行內(nèi)塊狀元素都有這種情況，一般都是

display: block;

這不是 bug ，原理大概是：

textarea,img 本質(zhì)上是行內(nèi)元素，行內(nèi)元素格式化是按照父元素的基線對(duì)齊的，對(duì)于他們沒(méi)有基線，則是將元素的底端與父元素的基線對(duì)齊，而父元素的基線離父元素的底端有些距離，所以導(dǎo)致了空白；

解決方法從這個(gè)角度出發(fā)就有兩種

1、變成塊級(jí)元素
2、調(diào)整垂直對(duì)齊方式，默認(rèn) vertical-align:baseline，改成 top 或者 bottom

詳情翻閱 CSS權(quán)威指南-中-第3版，再貼個(gè)知乎

2018年6月28日 00:45
編輯回答
幼梔

只需要display:inherit就可以了

2017年9月4日 18:24
編輯回答
風(fēng)畔

垂直對(duì)齊的問(wèn)題

textarea {
    vertical-align: top;
}
2017年2月14日 11:07
編輯回答
傻叼

方法有如下：
1.

 textarea {
    vertical-align: top/middle/bottom;
}

2.

 textarea {
    display: block
}

3.

div { line-height:0}

等等...
更多用法 參考鑫大神的 CSS深入理解vertical-align和line-height的基友關(guān)系

2018年8月21日 22:09