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
Post a Comment