CSS Display
Each element on the page is displayed either as a block or inline. We can notice the difference of display in different elements. The anchor, input, label tags are inline as they display next to each other when added on the page. The paragraph, headings, list items are some examples of block as they display on their own line.
We can control the display behavior of the elements using the display property
CSS Display provides powerful layout and content control capabilities through CSS. As we explore navigation and layout more we'll see this property used more often. In the lessons coming up we will see primary differences between inline and block elements.
Display: Block/inline
Block
A block-level element occupies the entire width of its parent element, thereby creating a "block". display: block;
Inline
Inline elements are those which only occupy the space required for the content of the element. The property of width and height will have no effect on these elements. display: inline;
Inline-block
Inline-block elements are the ones that occupy the space required for the content. The width and height properties do effect these elements. display: inline-block;
None
If we want to remove content from the flow of the document we can set it's display to none. This is helpful in setting mobile and desktop specific styles. display: none;
When there is enough room, there will be more of a greeting from our friend below.
Examples
List Items
List items inside the ordered and unordered lists are block level elements like the paragraph. We can make them display inline by adding the property display and value inline.
Anchor Tags
By default anchor tags are inline elements, in the example below we can see that they do nto respect the values for the width and height properties. However in the second pen we can see that after changing the display to inline-block the width and height properties take effect and the anchor tags are still displaying inline.
Video Resource
This YouTube video was created by Steve Griffith.