手機端頁面自適應解決方案—rem佈局
請問, p標籤與input標籤的間距為什麼這麼大?
PS. 去掉<!DOCTYPE html>就沒有問題, 這是為什麼?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello</title>
<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]); flex(100, 1);</script>
<style type="text/css">
.p{
background: #FFF;
padding:0.2rem;
}
.p p{
font-size: 0.26rem;
color:#24b5f1;
border: 1px red solid;
}
</style>
</head>
<body style="background:#eeeeee;">
<p class="p">
<p>Hello</p>
<input type="text">
</p>
</body>
</html>
因為
input元素是行內塊元素，所以它所在的行會形成一個行框。然後行框的高度是和line-height屬性相關的，line-height的說明如下：line-height定義的是行的最小高度，當行內包含行內元素的時候，每個行內元素會產生一個行內框，然後行內元素根據vertical-align屬性對齊元素，然後取所有這些框的最高上邊界和最低下邊界，最高上邊界和最低下邊界之間的高度組成了實際的行高。那麼規範又是如何保證
line-height定義的是行的最小高度的呢？其實，參與行框形成的元素，除了這些
實際存在的行內元素，還存在一個strut元素，這是一個假想的具有塊元素的字號和行高的零寬元素，這個元素會參與最後實際的行高。現在，我們來看這個問題：
font-size * line-height = 50px * 1 = 50px🎜的行內框，這兩個行內框按照基線對齊的方式進行排列，然後取這兩個行內框的最高上邊界和最低下邊界就是最後的行框。因為input元素產生的行內框遠遠沒有50px，所以最後取得應該是🎜strut🎜的上邊界和下邊界，所以這個行框是50px，所以導致中間有"所謂"大段的空白。 🎜你這個頁面運行之後，會在html元素上添加一個
font-size屬性，沒有具體看這個大小和什麼相關，我運行程式碼以後的結果是font-size : 50px;，以下以font-size: 50px;來進行說明。因為
font-size屬性是可以繼承的，所以你的p元素的font-size也是50px；因為line-height的預設值是normal，規範建議的normal值是line-height
的字體值是normal，規範建議的normal值是
line-height的1.0到1.2之間，和瀏覽器實作有關，我們這裡假設用的1.0；第一個元素是p元素，是區塊級元素，不會產生行框，和line-height沒有關係；第二個元素是input元素，input元素是行內塊元素，行內塊元素產生的行內框是元素上外邊界到下外邊界（margin的上邊界到下邊界），然後strut這個假想元素產生了一個高為綜上，你可以設定
p的font-size: 0px;這樣假想的strut元素形成的行內框就不會高於input元素產生的行內框了。或設定input元素
display: block;，這樣input元素就是區塊級元素了，區塊級元素是不涉及行框的。Update1：
有
聲明表示文檔運行在標準模式下，去掉以後是運行在兼容模式下的，標準模式遵守標準規範，兼容模式就不一定了。把根字體設定一下
p標籤自帶上下margin
麼有重置css吧 reset下試試
你的那個js有問題吧
頁面解析出來根目錄font-size都是100px,通常都是16px
首先 p標籤自帶margin input{vertical-align: top;}
確實和父元素font-size有關，表現為最小行高是父元素字體的大小，解決方法是設定合適父元素font-size或設定display:block，高票答案很詳細