1. input And button Why is there a gap ?
- Understand why , Need to know a few basic knowledge (
Read it patiently , You'll find it so simple )
1. input And button All belong to row level block elements , All have textual features ,
2. html One of them is called : The East and west of the blank text separator ( namely :html in , No matter how many carriage returns and spaces you write between two line level or line block level elements, a space will be folded , I call it a blank text separator here )
3. And here comes the key : We're writing about html In the code , You'll find us input And buton Is there a carriage return between the elements , And this carriage return is the blank text separator I mentioned above , He has the size of , So there will be input And buttom There is a gap between them
- terms of settlement :
- I know why , So the solution is pretty easy , Delete us directly html In the code input And button The return between can be .
2. input And buttom Why? Set up Equal height but Not high ? The same height but not in alignment ?
- I hope you can follow the following method to explore (
You'll find that , Unexpectedly ~ Ha ha ha )
1. Create a test.html
2. Knock on input and button Two elements , Define width and height , Because we're going to test why it's highly consistent but not aligned , therefore , We give them equal height , Equal border , The width is arbitrary ,
[ Be careful :input And button There's a gap between them , To align , Remove the gap first , How to solve : Please refer to the last question ]
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 * { 10 padding: 0; 11 margin: 0; 12 } 13 input { 14 width: 180px; 15 height: 40px; 16 border: 1px solid #008c8c; 17 } 18 19 button { 20 width: 50px; 21 height: 40px; 22 background: inherit; 23 border: 1px solid black; 24 /* box-sizing: content-box; */ 25 } 26 </style> 27 </head> 28 29 <body> 30 <input type="text"><button> Button </button> 31 </body> 32 33 </html>
The above code can be viewed in the browser , You'll find that it's clearly set to equal height , but input But than button The height should be higher ( Why? , Keep looking down )
3. Right click to check ( or F12 Use developer tools ), Choose input Elements , Check out his box model , You'll find that , Why , Except for the width and height we set , I have my own padding, Now you think , Is it right? padding The problem of ,( Actually button It also has its own padding Of ),
To exclude padding Influence , We insert... Into the code *{
padding:0;
margin:0;
}
At this time you will find , Why , It seems that it is still out of alignment , It doesn't seem to be padding The problem of ( Actually , We are in development , In general, all elements are initialized padding and margin), So this is obviously not the effect input and button The reason for the discrepancy
4. here , We're choosing button Elements , Check out his box model , Why , I'll be surprised to find , Oh my god , Why, its width is 48px, Height is 38px What about it , What we set up is 50px and 40px ah , But if you watch carefully, you will find that , Why , It seems that the border is set by us 50px and 40px 了 , wow , Isn't that what box-sizing:border-box The performance of ?( We are in Computed View the calculation style in box-sizing It's a discovery border-box)
Here we are. , Our problem is finally getting a little better , Don't give up , perseverance prevails , It's only one step away from the great God , We explore every step of the problem
5. This needs to be known :
Chrome browser box-sizing The default is content-box, namely padding and border It's not set up by us width and height Medium ,
and box-sizing : border-box, namely padding and border It's in width and height Medium ;
6. When we get here, we all know why input and button To the uneven , That's why we look at it button The box model of , its width Turn into 38px The reason why the ,
7. ** here , We put button Of width Change it to 42px( Remember to change the height , I'm not writing code anymore )
8. In the end, you'll find that there are still some missing ones , In principle, it should be aligned ,
Ha ha ha , At this time, I found that , We just solved the first little problem , Why not high ,
Actually , We thought at first that they were sorry , The problem of unequal height is ignored , Keep going
9. to input Set up vertical-align:1px; You'll find that , Oh my god , Perfectly aligned ,
, The above is the process of their own exploration , But it only solves the first hidden problem perfectly , Why not high , But why not , Actually, I'm not sure , It's just that you happen to use the attributes you've learned , It's used here , Although solved , But it's still unclear why , Forget that you have a clear guide , Thank you. ( Remember to leave a message to discuss ~)
![[最佳实践]了解 Eolinker 如何助力远程办公](/img/7b/e786e0d73114e6c6800747580aad2d.jpg)