CSS Basics: The Box Model

VideoLab by Jad Khalili
A free video tutorial from VideoLab by Jad Khalili
Udemy Instructor - 80K+ Students Worldwide
4.4 instructor rating • 8 courses • 95,146 students

Lecture description

In this video, I talk about the CSS Box Model, and how to manipulate it.

Learn more from the full course

The WordPress Bootcamp: Build 11 Websites with WordPress

Learn WordPress Development with SEO, WooCommerce, HTML and CSS, WordPress Page Builders, and more - For beginners!

25:47:17 of on-demand video • Updated March 2019

  • Create beautiful, production websites that any employer or client would be impressed with.
  • Have a portfolio consisting of 10 real-world websites using plugins from every corner of the WordPress Plugin Repository.
  • Learn SEO Fundamentals and Application of SEO.
  • Learn how to use WordPress & All Major WordPress Plugins proficiently.
  • Learn to use 4 page builders, including Elementor, SiteOrigin, Themify, and Beaver Page Builders.
  • Learn to use WooCommerce to make impressive and functional eCommerce websites.
  • Learn the basics of HTML & proficiency in CSS.
  • Learn how to properly Cache your website.
  • Learn the basics of Web Security & Security management for WordPress.
  • Learn the use of BuddyPress & bbPress to make a social media network.
English [Auto] I will come back. So in this video we're going to be talking a little bit more about CSSA. And this is one of the most in most important topics and CSF that we can learn and it is great because it teaches you positioning and how to move things so we've done styling and selecting But we haven't really done any positioning and changes. So that's what I want to teach you because it's a very important skill to have. So in this video we're going to be talking about the CSSA box model. So I'm going to explain all of that. But first let's go through a quick introduction. So the x box model is a series of layers or items that help you position an item and all items follow this box model this box object. So each one represents a different space around the object and you can manipulate it and change it to see how it's positioned. So let's get into it. This is what the model looks like. So you can see here the white box in the center is the content. So all the text and everything. And then around that we have this thing called padding. Again I'll explain all of this is later. Then we have the border of the content and then margin. So you can see here that this is very layered like and each one represents a different layer. And like I was saying you can manipulate it so you can change its size stretch it out distorted to sort of position it to what you like. So let's go. And the first thing I want to talk about is this the padding so the padding represent the space between the content and the border. Talk about the border in just a second. But this can be used to maybe add some space inside the object without having to really stretch out anything else. So it represents the space between the content and the border. It's not that hard to understand just know that this represents the space between the content and the border. Next is the border so the border is the divider between the margin and padding and this really isn't an actual space in itself but there's a little style here. This room that I'd like to tell you about. So not many people use it that often anymore because it looks quite ugly but just for reference maybe if you want to see the positioning of something to see how it looks you know to see where the content is and how everything is working. It's a great tool to use especially when you're working with wordpress themes you don't know how things are positioned. But this is the theme. So this is the CSX property. It's called the border property. And it all it takes three arguments. The first is the size one pixel 10 pixel next is the type so there is solid dash and there's a few more but you can't really remember now most of the time we're going to be using solid. And then of course there's the color so this can take R.G. name callers hex code all that. So that's pretty simple. So there's a border right there as a little bit dramatized. Usually this is just one thin line because by default it isn't defined as this big space but finally is the margin. So this isn't that hard to understand but it's a little bit more complicated than padding margin is the space between the border and all of the other content. So let's say you have two two paragraphs on top of each other. What the Margene will do is separate the space between them so you can see here and let's say we had a box up here. Now what this will happen is the margin will push that box up and the margin gives some space for the content so that it can be separated from everything else. So last thing I'd like to cover is manipulating the box model. So this is quite easy. But there's a few things I want to explain here. So pretty much this is the general theme that it follows you'd have here margin or padding the content and the border don't follow this on the margin and padding do warps margin and padding. So what would happen is you would have the name either margin or padding and then dash than the position you can see where this could be top bottom left or right and then that you take. Size is an argument you can see it works here for padding and it has left right and all of that or if you want to let's say at the same space all around you can just give the name margin or padding without having any dash and then the location. So you see here margin 20 pixels will give 20 pixels of margin on the top left right and bottom so sort of doing margin top three pixels margin right three pixels. And there's one more way we're going to cover that in the next video. I don't want to really cover it now but yeah. So let's just recap very quickly the box model is pretty much just a way to it's a bunch of layers that adds facing to items the represent a different place. And then you can manipulate them in CSX. All right. Let's move on.