Why inline input tag in html reacts to width and height properties? [duplicate]-CodePudding

This question already has an answer here:

Why here both input tags have width and height as I mentioned in css file? They both should ignore it as inline elements

<input class="submit" type="submit" value="Send">
<input class="reset" type="reset" value="Clear">

input
{
    width: 200px;
    height: 40px;
    background-color: lightgreen;
}

CodePudding user response：

As you mentioned, inputs are listed as being inline elements (https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#list_of_inline_elements), but browsers have their own stylesheets called user agent stylesheets that set their own defaults when rendering HTML.

If you check chromium: https://chromium.googlesource.com/chromium/src/third_party/ /refs/heads/main/blink/renderer/core/html/resources/html.css#408, you'll see on line 419 that they're setting input, textarea, select, button to display: inline-block;.

Each browser has their own user agent stylesheet and if you check your browser developer tools, scroll through the css rules for an input. You'll eventually find the rule I referenced above.

Page link：https//www.codepudding.com/Backend/138167.html

Prev:Is it possible to merge @media & class rules?

Next:Change colour of flush list line break in bootstrap 4