Issue
I want to have a div that wraps an input element. While trying to get the paddings etc. pixel perfect, I realised that the divs size behaves quite weird.
Why is the div bigger than the input?
This can be mitigated by putting font-size: 12px
the div
AND the input
field.
But STILL the surrounding div is 15.3px while the input is 14px.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML + CSS</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body style="background-color: lightgrey">
<!-- add to div and to ipnut font-size: 12px-->
<div style="box-sizing: border-box; background-color: white">
<input
style="vertical-align: middle; border: none; background-color: green"
placeholder="Hello"
/>
</div>
</body>
</html>
Solution
Its happening not because of div, but it's happening because input is an inline-block element by default. So just need to add display: block;
in input' style.
<input style="vertical-align: middle; border: none; background-color: green;display:block;" placeholder="Hello" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML + CSS</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body style="background-color: lightgrey">
<!-- add to div and to ipnut font-size: 12px-->
<div style="box-sizing: border-box; background-color: white">
<input
style="vertical-align: middle; border: none; background-color: green;display:block;"
placeholder="Hello"
/>
</div>
</body>
</html>
Answered By - Jignesh Panchal
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.