Why does an element lose its left/right margins when given a width?

Question

The following:

<!DOCTYPE html>
<form>
    <input type=text>
</form>

Produces the following box model in Chrome:

box model no width

However, if the input type is styled with a width:

<!DOCTYPE html>
<form>
    <input type=text style="width: 100px;">
</form>

The left and right margin are removed:

enter image description here

Why is this?

isherwood · Accepted Answer

"The purpose of intrinsic margins is to try to prevent adjacent controls from butting up against one another. Especially with rounded controls this looks terrible. The reason you see the values change is that we only set intrinsic margins when we think it won't disrupt the layout of the page. If the author specifies an explicit height/width on the control, then we assume the designer is needing pixel-precise control, and so we turn the margins off to avoid disrupting the page layout."

https://code.google.com/p/chromium/issues/detail?id=128306#c20

Why does an <input> element lose its left/right margins when given a width?

Tags:

html

css

google-chrome

HorseloverFat

1 Answers

isherwood

Recent Activity

Donate For Us