CODEWITHSUNDEEP
htmlcss
dibs
dibs

Reputation: 1077

input and textarea appear different width when are set to same width?

When I set the width of an input and a text area to 94% they appear to be slightly different in width. This is something I have seen many times on many sites.

Can anyone explain why a textarea is not as wide as an input when set to the same % width? 

input, textarea {
    width: 94%;
}

Upvotes: 9

Views: 6447

Answers (2)

Ricardo Marimon
Ricardo Marimon

Reputation: 10687

With CSS3 you can also use:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Upvotes: 9

John Conde
John Conde

Reputation: 219804

  1. Don't forget the box model includes borders, padding, and margins. They all affect the actual physical width of an element in the page.
  2. Unless you use a CSS reset you're at the mercy of the default browser stylesheets which set different borders, padding, and margins for each element.

Upvotes: 11

Related Questions