• 01666-222229
  • info@practicise.com
  • Sircl Tech Pvt. Ltd, Red Light Chowk, Sirsa
Search
Close this search box.
Course Content
CSS Basic
0/1
What is CSS?
00:00
Ways To Add CSS
0/4
Introduction
00:00
Inline CSS
00:00
Internal CSS
00:00
External CSS
00:00
CSS Colors
0/6
Named Colors
00:00
Hexadecimal Colors
00:00
RGB Colors
00:00
RGBA Colors
00:00
HSL Colors
00:00
HSLA Colors
00:00
CSS Selectors
0/1
Introduction
CSS Comments
0/1
Introduction
CSS Text Formatting
0/1
Various types of Text Formatting
00:00
CSS Backgrounds
0/1
Introduction
00:00
CSS Borders
0/1
Introduction
CSS Outline
0/1
Introduction
00:00
CSS Fonts
0/1
Font Family
00:00
CSS Height and Width
0/1
Introduction
00:00
CSS Margins and Paddings
0/2
CSS Margin
00:00
CSS Padding
00:00
CSS Box Models
0/1
What is CSS Box Model?
00:00
CSS Align
0/5
Text Alignment (text-align)
00:00
Horizontal Centering (margin and auto)
00:00
Vertical Alignment
00:00
Grid Centering
00:00
Table Cell Alignment (vertical-align for table cells)
00:00
CSS Icons
0/1
Introduction
00:00
CSS Links
0/1
Introduction
00:00
CSS Lists
0/1
Introduction
00:00
CSS Tables
0/1
Introduction
00:00
CSS Gradient
0/4
How to use CSS Gradients and its Types
00:00
Linear Gradients
00:00
Radial Gradients
00:00
Conic Gradients
00:00
CSS Display Properties
0/1
Introduction
00:00
CSS Max-Width Property
0/1
Introduction
00:00
CSS Positioning Elements
0/1
Introduction
00:00
CSS Z-Index Property
0/1
Introduction
00:00
CSS Overflow
0/1
Introduction
00:00
CSS Float
0/1
Introduction
00:00
CSS Opacity
0/1
Introduction
00:00
CSS Pseudo-classes
0/1
Various Types of Pseudo-classes
00:00
CSS Pseudo-Elements
0/1
Various Types of Pseudo-Elements
00:00
CSS Forms
0/1
Introduction
00:00
CSS Flexbox
0/3
Introduction
00:00
Container Properties
00:00
Item Properties
00:00
CSS Nav
0/2
How to create Vertical Navbar using CSS?
00:00
How to create Horizontal Navbar using CSS?
00:00
CSS Dropdowns
0/1
Dropdown Creation
00:00
CSS Buttons
0/1
Introduction
00:00
CSS Cards
0/1
How to create Cards using CSS?
00:00
CSS Image Gallery
0/1
How create an image Gallery using css?
00:00
CSS Media Queries
0/1
Introduction
00:00
CSS Variables
0/1
What is CSS Variables
00:00
CSS 2D Transforms
0/1
Various types of 2D Transforms
00:00
CSS 3D Transforms
0/1
Various types of 3D Transforms
00:00
CSS Transition
0/1
Types of CSS Transition
00:00
CSS Animation
0/8
What are CSS Animations
00:00
The @keyframes Rule
00:00
Animation Duration
00:00
Animation Delay
00:00
Animation Iteration Count
00:00
Animation Direction
00:00
Animation Timing Function
00:00
Animation Shorthand property
00:00
CSS Grid Layout
0/3
CSS Layout
00:00
Grid Container
00:00
Grid Item
00:00
CSS
About Lesson

What is CSS Box Model?

The CSS Box Model is a fundamental concept in web design that describes the layout of elements on a webpage. It consists of four main components: content, padding, border, and margin. Each component contributes to the total size of the box, and understanding how they interact is essential for designing and styling web layouts.

  1. Content: The actual content of the element, such as text, images, or other media.
  2. Padding: The space between the content and the element’s border. Padding helps create space around the content, providing visual separation between the content and the border.
  3. Border: The border of the element, which can be solid, dashed, or dotted. The border wraps around the padding and content, defining the visible boundary of the element.
  4. Margin: The space outside the element’s border. Margins create space between the element and adjacent elements, controlling the layout and spacing between elements on the webpage.

Syntax of CSS Box Model:

CSS
.element {
  /* Content */
  width: value;
  height: value;

  /* Padding */
  padding-top: value;
  padding-right: value;
  padding-bottom: value;
  padding-left: value;

  /* Border */
  border-width: value;
  border-style: value;
  border-color: value;

  /* Margin */
  margin-top: value;
  margin-right: value;
  margin-bottom: value;
  margin-left: value;
}

Example:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>CSS Box Model Example</title>
</head>
<body>
  <div class="box">
    This is the content of the box.
  </div>
</body>
</html>
CSS
.box {
      width: 200px;
      height: 150px;
      padding: 20px;
      border: 2px solid black;
      margin: 20px;
    }

In this Example:

  • We have a div element with the class “box”.
  • We set the width and height of the box to 200 pixels and 150 pixels, respectively.
  • We add 20 pixels of padding around the content of the box.
  • We define a 2-pixel solid black border around the box.
  • We add 20 pixels of margin around the outside of the border.

Here’s a diagram illustrating the CSS Box Model:

|-----------------------|
|       Margin          |
|  ___________________  |
| |      Border       | |
| |  _______________  | |
| | |   Padding     | | |
| | |               | | |
| | |   Content     | | |
| | |               | | |
| | |_______________| | |
| |___________________| |
|-----------------------|

Understanding the CSS Box Model helps you control the layout and spacing of elements on your webpage effectively.

Previous
Next