The Difference Between Block and Inline Elements
► HTML elements are the building blocks of web pages, and each one starts life with a default display value of either block or inline.
Which value an element has is determined by the type of element that it is. Elements fall into two categories: block-level elements and inline elements.
Block-level elements always start on a new line and take up the full width available inside their parent element (stretching left to right as far as possible). Some examples of block-level elements include div, nav, header, section, footer, and ul elements to name a few.
Inline elements do not start on a new line and only occupy the space that their content requires. Some examples of inline elements include span, input, label, select, and anchor elements.
► Timestamps:
0:00 Start
1:00 The MDN Element reference
2:19 Block-level elements
2:42 Inspecting elements using Chrome DevTools
4:35 Block-level elements stretch teh full width of their container
5:00 Inline elements (links and images)
9:37 Block vs. Inline elements
10:05 Inline elements that format text
13:21 Summary
► Get the code:
Repo: https://github.com/craigabourne/html-...
Block vs Inline vs Inline-block: https://codepen.io/craigabourne/pen/o...
► Links used in the video:
MDN HTML Elements Reference: https://developer.mozilla.org/en-US/d...
Unsplash: https://unsplash.com
W3 Schools Block & Inline Elements: https://www.w3schools.com/html/html_b...
► The HTML for Absolute Beginners Playlist: • HTML for Absolute Beginners
► Social Media:
/ craigabourne
/ craigabourne
► Code & Projects:
https://github.com/craigabourne
https://codepen.io/craigabourne
On this page of the site you can watch the video online The Difference Between Block and Inline Elements with a duration of hours minute second in good quality, which was uploaded by the user Craig A. Bourne 17 February 2021, share the link with friends and acquaintances, this video has already been watched 2,781 times on youtube and it was liked by 172 viewers. Enjoy your viewing!
