The MDN HTML Elements Reference has been indispensable while teaching my students - but there is one area that causes them the most confusion. They don’t always know what an element’s default properties are. I am going to focus on the ‘display’ property.
For historically good reasons - elements like iframe
and img
are display: inline;
. People who are new to layout often get tripped up trying to add a margin to inline elements because they don’t know they are inline. Even 10 years in, I still get tripped up trying to remember things like “what is the default display type for custom elements?”
Please include “as far as I know” - before the following ; )
In chrome’s dev tools - there is no sign of any default display property.
My first thought was to check the MDN reference - and point the students to that table / but there isn’t any note on the default display.
and so I needed a way to check on some elements and show the default to the students: https://codepen.io/sheriffderek/pen/RwNRPyO?editors=1001 (link independent of codepen UI: https://cdpn.io/sheriffderek/debug/RwNRPyO)
Firefox dev tools do show defaults in the box-model section - which is really cool.
So - what I’m suggesting, is that we identify the few default properties that cause the “gotchas.” I think there might be a few, but display
is the one we have been seeing the most confusion around. position
is always static
by default, so that’s an example of something that isn’t unique to any element and wouldn’t be included in this table.
HTML: Elements Reference: HTML elements reference - HTML: HyperText Markup Language | MDN
topic: Planning and coordinating changes to the site > specifically HTML element reference
Please let me know if you have any questions and maybe I can come up with better examples. At the end of the day, my goal is to fill in what I see as a hole in the elements reference so that people don’t need to memorize what can seem like quirks.