Yo ninjas, in this CSS positioning tutorial, we’ll take a quick look back at what the box model is in CSS. The box model helps us to control the width, height, padding, margin & border of all block level elements (but not in-line elements).


========== JavaScript for Beginners Playlist ==========

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

========== HTML for Beginners Playlist ==========

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

For more front-end development tutorials & to black-belt your coding skills, head over to – or

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

Twitter – @TheNetNinja –


  1. Hi @TheNetNinja how can you select the elements's border, without write border in the css, in the preview page? ps. Your video is really good, thank you! I love also the ninja-cat effets! XD

  2. Thank you! I am doing web development for a summer project and I often get hung up with CSS doing things I'm not sure why. This video helped, and I'm looking forward to the rest!

  3. this is the best tutorial i've seen so far, all your tutorials are simple, easy to understand and effective specially for us beginners in web dev. cheers, insta sub..

  4. Is the live preview/ live selection only available for Brackets? Or is it possible to do it with Atom? (like selecting different elements and the browser showing which one is selected). Thanks!

  5. Thank you thank you thank you. You have no idea how much this video has impacted me right here. I took a web dev course on udemy, feeling really comfortable with some little app there and then being hand held by the instructor.

    Then I went on to replicate a site as a practice on my own without any help and bam, I can't even get the elements to line up together. I almost cried and gave up everything all together after reading the documentation and but still not understanding why things aren't working.

    I was on the verge of tears and then this video solved my problem.

    I just really want to say thank you from the bottom of my heart. I know this video just explains what seems like a really simple premise to you but for me it made a world difference.

  6. Thank you for your videos sensei. Question: how did <p> take a width value in '%'. How did the width take a %value without html or body's width declared ?

  7. Hey master, I think you once showed us how to prevent margins from collapsing. I can't remember the vid your tip was in, could you give me the link of the video or explain it to me ?

  8. Are anchor elements the only elements that are inline by default?
    Great video btw, as already said one of the most clear explanations of this I've heard


Please enter your comment!
Please enter your name here