Skip to main content
Menu
CodeBabes
  • Create new account
  • Request new password

or

  • Sign in with Twitter
  • Code
  • Babes
  • Sign Up
  • Log In

Looks like you missed a quiz. Go back and pass that shit!


NO STRIP FOR YOU!

Share the Love

  • Tweet

CSS Box Model

Since you did such a good job, here's a bonus video.

Each HTML element on a page has four different properties. Content, Padding, Border and Margin. These are known as the box model. A working knowledge of the box model is critical to becoming a CSS ninja.

Let’s look at a diagram of the box model. In the middle is the content, then there is padding, then the border, and finally the margin.

Let’s break these down.

First, the content layer. That’s the good stuff, like if you just saw me naked, that’s the content. In paragraphs or headings this is the text, for images it’s the picture. The size of the content depends on the type of the object, but it can be altered with the CSS properties: width and height.

Padding provides separation between the Content and the Border. So my boobs look pretty big, but that might some padding in my bra, it’s not, just saying. Padding is a CSS property. It’s thickness can be controlled individually, on the top, right, bottom, and left with specific properties. I prefer to be on top. They can also be defined all-at-once with four different values, like 10 pixels, 20 pixels, 15 pixels, 25 pixels. Or, two properties which affect the top and bottom, and, left and right, like padding 10 pixels, 15 pixels. If you specify a background color for a piece of content it will extend to the border of the padding.

Next is the border. This provides a visual container around the element. It lives between the margin and the padding. You can specify the border color, width, and style: dotted, solid, or double solid. As with padding, you can specify the top, right, bottom, or left individually, or list 2, 3, or 4 values in the same border property. To specify a solid, one-pixel, black, border for all sides use: border—one-pixel—solid—black.

The last is margin. That’s my personal space. The margin provides separation between elements. It is transparent, so it will be the color of its parent element. It can be sized like padding, one rule for all sides, or you can specify the width on a per-side basis.

When you set the width and height properties of an element with CSS, you’re setting the width and height of the content area. When you specify Padding on an element, it will increase the size of the element. We have a div. It has a width and height of 10 pixels, and then add padding of 5 pixels to all four sides, the size of the element will be 20 pixels by 20 pixels. I’ll wait while you do the math.... Did you get it?... Good boy. If you add a one-pixel border to the element, the size will be 22 pixels. And so on for the margin.

Questions or Comments?

Lessons

  • Where to Stick your CSS
  • CSS Properties, Sizes and Colors
  • CSS Selectors
  • CSS Box Model
CSS Virgin

Downloads

SignUp & Subscribe

What the What?

Lessons: 41

Much more to come!

50/50 Entertainment and Education. Learning doesn't have to be boring :)

Our Philosophy

Contact

  • support
  • Tweets!
  • Youtube
  • Google Plus
  • Facebook

Stuff

  • Blog
  • Sign Up
  • All Babes
  • All Courses
  • Become a CodeBabe!
  • MAKE A LESSON WITH CODEBABES!

Recent Courses

Internet Virgin
SEO Virgin
HTML Virgin
CSS Virgin
Programming Virgin with Javascript

Learn to Code with Babes

Copyright © 2025 CodeBabes.com • Made with

  • Privacy Policy
  • Terms of Use
Close Menu
  • Blog

  • All Courses
  • Android Virgin
    • Android Studio Tour
    • App Layout in Android Studio
    • Java Variables, Java Data Types & Android Views
    • Java Event Handling in Android
    • Android Intents, OOP This, Variable Scope
    • Passing the Data with Android Intents & Finish
    • Complete the Android App with Launcher Icons & APK
    • Android Happy Ending
  • Internet Intro
    • Backend Development
    • Front End Web Development
    • Programming Tools you Need
    • Hosting and Domain Names
  • HTML Virgin
    • HTML Text Tags
    • HTML Links and Images
    • HTML Layout with HTML 5
    • HTML Tables
  • CSS Virgin
    • Where to Stick your CSS
    • CSS Properties, Sizes and Colors
    • CSS Selectors
    • CSS Box Model
  • Programming Virgin
    • Variables in Programming
    • Programming Intro Conditional Statements
    • Programming Intro to Arrays
    • Programming with Loops
    • Programming with Functions
  • PHP Virgin
    • PHP Variables
    • PHP Conditionals
    • PHP Arrays
    • PHP Loops
    • PHP Functions
  • SEO Virgin
    • Make Google Love You
    • Understanding Keyword SEO
    • Optimizing for SEO
    • Technical SEO