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
Watch video The Difference Between Block and Inline Elements online without registration, duration hours minute second in high quality. This video was added by user Craig A. Bourne 17 February 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2,781 once and liked it 172 people.