Mobile page adaptive solution—rem layout
Excuse me, why is the distance between the p tag and the input tag so large?
PS. There will be no problem if you remove <!DOCTYPE html>
. Why is this?
<!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>
Because the
input
element is an inline block element, the line it is on will form a line box. Then the height of the line box is related to theline-height
attribute. The description ofline-height
is as follows:line-height
defines the minimum height of the line. When the line contains inline elements, each inline element will generate an inline box, and then the inline elements will align the elements according to thevertical-align
attribute, and then take all these boxes The height between the highest upper border and the lowest lower border constitutes the actual row height.So how does the specification ensure that
line-height
defines the minimum height of a line?In fact, among the elements that participate in the formation of line boxes, in addition to these
actually existing
inline elements, there is also astrut
element, which is an imaginary zero-width element with the font size and line height of the block element. This element will participate The final actual row height.Now, let’s look at this problem:
After running your page, a
font-size
attribute will be added to the html element. I didn’t see what this size is related to. The result after I run the code isfont-size : 50px;
, the following is explained withfont-size: 50px;
.Because the
font-size
attribute is inheritable, thefont-size
of yourp
element is also 50px; because the default value ofline-height
is normal, and the normal value recommended by the specification is the font size. Between 1.0 and 1.2, it is related to the browser implementation. We assume that 1.0 is used here;The first element is a p element, which is a block-level element and does not generate line boxes and has nothing to do with line-height;
The second one The element is an input element, and the input element is an inline block element. The inline box generated by the inline block element is from the upper outer boundary to the lower outer boundary of the element (the upper boundary to the lower boundary of margin), and then the imaginary element
strut
generates a height offont-size * line-height = 50px * 1 = 50px
Inline box, these two inline boxes are arranged according to the baseline alignment, and then the highest upper boundary and the lowest lower boundary of these two inline boxes are the final one line box. Because the inline box generated by the input element is far less than 50px, the upper and lower boundaries should bestrut
in the end, so the line box is 50px, resulting in a "so-called" large blank space in the middle.To sum up, you can set the
font-size of
p: 0px;
so that the inline box formed by the imaginarystrut
element will not be higher than the inline box generated by the input element.Or set the input element
display: block;
, so that the input element is a block-level element, and block-level elements do not involve line boxes.Update1:
There is a
<!DOCTYPE html>
statement indicating that the document runs in standards mode. After removing it, it runs in compatibility mode. Standard mode abides by standard specifications, but compatibility mode is not necessarily the case.Set the root font
p tag comes with upper and lower margin
Is there any way to reset the css? Try reset
Is there something wrong with your js?
The page parsed shows that the font-size of the root directory is 100px, usually 16px
First of all, the p tag comes with margin input{vertical-align: top;}
It is indeed related to the font-size of the parent element. The minimum line height is the font size of the parent element. The solution is to set the appropriate font-size of the parent element or set display:block. The upvoted answer is very detailed