mdn/css/1_css_building_blocks/13_images_media_form_elements

13_images_media_form_elements

dz / mdn / css / 1_css_building_blocks / 13_images_media_form_elements

Summary

Images, media, and form elements

Node Tree

Nodes

elements
content elements
children form_elements, replaced_elements, reset

replaced_elements
content Replaced Elements
children images_and_videos (examples), layout, object_fit, aspect_ratio
parents elements

images_and_videos
content images and videos
parents replaced_elements

aspect_ratio
content aspect ratio: size in horizontal/vertical dimensions, displayed using intrinsic dimensions by default
children cover
parents replaced_elements

object_fit
content object-fit
children contain, cover
parents replaced_elements

layout
content layout
children diff_default_behaviors
parents replaced_elements

cover
content cover: sizes imag eto fit box while maintaining aspect ratio. May be cropped
children contain (related)
parents aspect_ratio, object_fit

contain
content contain: image scaled down small enough to fit inside box.
parents cover, object_fit

diff_default_behaviors
content different default behaviors in layout: images do not stretch
parents layout

form_elements
content Form Elements
children fieldset, font_styles_sometimes_uninherited, input, legend, text_input_easily_styled, textarea, box_sizing
parents elements

input
content <input>
parents form_elements

font_styles_sometimes_uninherited
content Some browsers don't inherit font styling by default. use font-family:inherit.
parents form_elements

textarea
content <textarea>
parents form_elements

fieldset
content <fieldset>
parents form_elements

legend
content <legend>
parents form_elements

text_input_easily_styled
content Text input element easy to style. Behavior like other boxes on page.
parents form_elements

box_sizing
content box-sizing
children zero_margins_padding, border_box
parents form_elements

border_box
content border-box
parents box_sizing

reset
content reset
children normalizing_stylesheet (AKA)
parents elements, textarea_overflow_auto, zero_margins_padding

zero_margins_padding
content Good idea to set margins/padding to zero, then add them back in when styling
children reset
parents box_sizing

textarea_overflow_auto
content textarea, overflow: auto to stop IE from needlessly showing scrollbar
children reset

normalizing_stylesheet
content Normalizing Stylesheet
parents reset