html - DIV and TEXTAREA elements interpreted 'width' CSS attribute differently? -


was bit confused when next html code

<div>some text insize div</div> <textarea>some text insize textarea</textarea> 

with css

div {     background-color: #eee;     width: 25em; }  textarea {     width: 25em; } 

displayed div , textarea different width... reason?

jsfiddle example here

ems measured based on font-size , each of elements have different font size. div font-size: 16px , textarea font-size: 11px @ least default in chrome.

if set elements same font-size same width. remaining difference because textarea has padding , border too.

if set css this, elements same size:

div {     background-color: #eee;     width: 25em;     font-size: 16px;     box-sizing: border-box; }  textarea {     width: 25em;     font-size: 16px;     box-sizing: border-box; } 

because both have same font-size, , widths based on border-box instead of content-box, padding , borders included in width.


references:


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

Kivy: Swiping (Carousel & ScreenManager) -