blockand which elements default to
The MDN box-model article linked in the previous lesson mentions that different display types have subtly different box models, and that you can change how a box is calculated by changing the
Most of the elements that you have learned about so far are block elements. In other words, their default style is
display: block. By default, block elements will appear on the page stacked atop each other, each new element starting on a new line.
Inline elements, however, do not start on a new line. They appear in-line with whatever else they are placed beside. A clear example of an inline element is a link, or
<a> tag. If you stick one of these in the middle of a paragraph of text, it will behave like a part of the paragraph. (Like this…) The link’s text will sit alongside other words in that paragraph. Additionally, padding and margin behave differently on inline elements. In general you do not want to try to put extra padding or margin on inline elements.
Inline-block elements behave like inline elements, but with block-style padding and margin. Inline-block is a useful tool to know about, but in practice you’ll probably end up reaching for flexbox more often if you’re trying to line up a bunch of boxes. Flexbox will be covered in depth in the next lesson.
This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something
box-sizingcss property do?
h1block or inline?
spanblock or inline?
buttonblock or inline?
divblock or inline?
paddingto create more space between 2 elements?
paddingto create more space between the contents of an element and its border?