SHARE

Yo my fellow web ninjas! In this CSS tutorial for beginners we’re going to explore what a block-level element is. I’ve mentioned already that the box-model governs the spacial properties (padding, margin, width, height & border) of all block-level elements, but not yet talked about what a block level element is!

A block level element is one which occupies the full horizontal width of its parent element.

An in-line element stacks from left to right… IN LINE. Hence the name :P. Box model properties do not apply to in-line elements, but we can set the display types of these elements to inline-block, so that we can control the spacial properties of them too!

Anyway, peace out, have fun & keep coding :).

LINK TO LIST OF BLOCK-LEVEL AND IN-LINE ELEMENTS – http://www.w3resource.com/html/HTML-block-level-and-inline-elements.php

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== CSS for Beginners Playlist ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT
========== HTML Basics Course ==========

https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

========== Social Links ==========

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

3 COMMENTS

  1. Hello Net Ninja. I understand why inline elements stack horizontal but why are they overlapping each other as in this video? Is it because they're contained in the div element and have no more space (padding) to occupy?

LEAVE A REPLY

Please enter your comment!
Please enter your name here