Loading
Java ScriptHtmlCssAngular
Introduction
CSS Syntax
CSS Box model
Colors
Background color
Margins
padding in CSS
Outline Properties
CSS Outline
CSS Text
CSS Text Alignment
Text Decoration
CSS Font
CSS Font Size and Style
CSS Icons
CSS Links
Lists in CSS
Tables in CSS
Table padding
CSS Display
CSS Max-Width
CSS Position
z-index
Overflow
CSS Float
CSS inline-block
CSS align
CSS Combinators
CSS Pseudo-class
Opacity
Navigation Bar
Fixed and Sticky nav bar
Dropdowns
Image Gallery
Image sprites
Forms
Selector Overview
ID Selector
Element Selector
Class Selector
Universal Selector
Group Selector
Overview
External CSS
Internal CSS
Inline CSS
Border Overview
Border Style
Border Width
Border Color

Box Model

  • CSS Box model is a fundamental concept in web Design and layout.
  • This describes how elements on a webpage are structured and how their dimensions are calculated.
  • It consists of several layers or "boxes" that wrap around an HTML element, determining its layout and spacing.

Box model:

The CSS Box Model consists of four essential components:

Content: 

  • This is the innermost layer.
  •  It represents the actual content of the HTML element, such as text, images. 
  • The content dimensions are set by the width and height properties in CSS.

Padding:

  •  The padding is the space between the content area and the element's border.
  •  It can be set individually for each side (top, right, bottom, left). 
  • Padding adds spacing within the element.

Border: 

  • The border provides a visible boundary for the element. and it surrounds the padding and content area.
  • It is controlled by the border property, which includes properties like border-width, border-style, and border-color. 

Margin: 

  • The margin is the space between the element's border and neighbouring elements.
  •  It controls the spacing between elements on a webpage. 
  • The margin property is used to set margins for each side (top, right, bottom, left) individually.

Key Points:

  • Box Model applies to all block-level and replaced elements in CSS. 
  • using the CSS Box Model effectively, you can control the spacing, layout, and visual appearance of elements on your web page, ensuring a consistent and visually appealing design.