Within my div, I am attempting to create a 5px padding around the text; however, there seems to be additional spacing that is interfering with my desired layout. It almost feels as though my browser is mocking my efforts by refusing to cooperate.
This is the CSS I have implemented:
div{
font-family:'Arial', sans-serif;
padding:5px;
font-size:14px;
}
Below is the HTML structure:
<div>
Sort By:
<select>
<option>Customer</option>
</select>
Search Customer:
<input type="text">
</div>
(Please note that no specific styling has been applied to the input and select fields.)
Upon viewing the output in my browser window, highlighted using Chrome's developer console:
Click here for the visual representation of the issue.
After analyzing the output, it appears that there is an added inner padding causing an extra 8px of space vertically. Even after adjusting the line-height to address this, the problem persists, and attempting negative values prompted errors from Chrome.
What exactly is this excess padding called, and can it be minimized? I aim for a precise 5px margin around the text without encountering the current total of 13px due to this unexpected padding.
Your assistance in resolving this issue would be greatly appreciated. Thank you in advance.