CSS Box Model¶

• Reference

The CSS Box Model¶

• In CSS, the term box model is used when talking about design and layout.

• The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins. The image below illustrates the box model:

  

• Explanation of the different parts:

  1. Content - The content of the box, where text and images appear
  2. Padding - Clears an area around the content. The padding is transparent
  3. Border - A border that goes around the padding and content
  4. Margin - Clears an area outside the border. The margin is transparent

• The box model allows us to add a border around elements, and to define space between elements.

  div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
  }
  

Width and Height of an Element¶

• Example: This <div> element will have a total width of 350px and a total height of 80px:

  div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
  }
  

• Calculation

  • Total element width = width + left padding + right padding + left border + right border

  • Total element height = height + top padding + bottom padding + top border + bottom border

    320px (width of content area)
    + 20px (left padding + right padding)
    + 10px (left border + right border)
    = 350px (total width)
    
    50px (height of content area)
    + 20px (top padding + bottom padding)
    + 10px (top border + bottom border)
    = 80px (total height)
    

CSS Borders¶

• The CSS border properties allow you to specify the style, width, and color of an element's border.

• Reference

  Property	Description
  border	Sets all the border properties in one declaration
  border-bottom	Sets all the bottom border properties in one declaration
  border-bottom-color	Sets the color of the bottom border
  border-bottom-style	Sets the style of the bottom border
  border-bottom-width	Sets the width of the bottom border
  border-color	Sets the color of the four borders
  border-left	Sets all the left border properties in one declaration
  border-left-color	Sets the color of the left border
  border-left-style	Sets the style of the left border
  border-left-width	Sets the width of the left border
  border-radius	Sets all the four border-*-radius properties for rounded corners
  border-right	Sets all the right border properties in one declaration
  border-right-color	Sets the color of the right border
  border-right-style	Sets the style of the right border
  border-right-width	Sets the width of the right border
  border-style	Sets the style of the four borders
  border-top	Sets all the top border properties in one declaration
  border-top-color	Sets the color of the top border
  border-top-style	Sets the style of the top border
  border-top-width	Sets the width of the top border
  border-width	Sets the width of the four borders

CSS Border Style¶

The border-style property specifies what kind of border to display.

• The following values are allowed:

  1. dotted - Defines a dotted border
  2. dashed - Defines a dashed border
  3. solid - Defines a solid border
  4. double - Defines a double border
  5. groove - Defines a 3D grooved border. The effect depends on the border-color value
  6. ridge - Defines a 3D ridged border. The effect depends on the border-color value
  7. inset - Defines a 3D inset border. The effect depends on the border-color value
  8. outset - Defines a 3D outset border. The effect depends on the border-color value
  9. none - Defines no border
  10. hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

• Example

  p.dotted {border-style: dotted;}
  p.dashed {border-style: dashed;}
  p.solid {border-style: solid;}
  p.double {border-style: double;}
  p.groove {border-style: groove;}
  p.ridge {border-style: ridge;}
  p.inset {border-style: inset;}
  p.outset {border-style: outset;}
  p.none {border-style: none;}
  p.hidden {border-style: hidden;}
  p.mix {border-style: dotted dashed solid double;}
  

• Result

  

CSS Border Color¶

The border-color property is used to set the color of the four borders.

The color can be set by:

• name - specify a color name, like "red"

• HEX - specify a HEX value, like "#ff0000"

• RGB - specify a RGB value, like "rgb(255,0,0)"

• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"

• transparent

• Specific Side Colors

  • The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border)

  

CSS Border - Shorthand Property¶

There are many properties to consider when dealing with borders, to shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

• border-width
• border-style (required)
• border-color

Example

p {
  border-bottom: 6px solid red;
}

• Result

  

CSS Rounded Borders¶

• The border-radius property is used to add rounded borders to an element:

  

CSS Margins¶

• Reference

• The CSS margin properties are used to create space around elements, outside of any defined borders.

• There are properties for setting the margin for each side of an element (top, right, bottom, and left).

  Property	Description
  margin	A shorthand property for setting all the margin properties in one declaration
  margin-bottom	Sets the bottom margin of an element
  margin-left	Sets the left margin of an element
  margin-right	Sets the right margin of an element
  margin-top	Sets the top margin of an element

Value setting¶

• All the margin properties can have the following values:
  1. auto - the browser calculates the margin
  2. length - specifies a margin in px, pt, cm, etc.
  3. %- specifies a margin in % of the width of the containing element
  4. inherit - specifies that the margin should be inherited from the parent element

Margin - Shorthand Property¶

• If the margin property has four values:

  p {
  margin: 25px 50px 75px 100px;
  }
  // top margin is 25px
  // right margin is 50px
  // bottom margin is 75px
  // left margin is 100px
  

• If the margin property has three values:

  p {
  margin: 25px 50px 75px;
  }
  // top margin is 25px
  // right and left margins are 50px
  // bottom margin is 75px
  

• If the margin property has two values:

  p {
  margin: 25px 50px;
  }
  // top and bottom margins are 25px
  // right and left margins are 50px
  

CSS Padding¶

• Padding is used to create space around an element's content, inside of any defined borders.

• It's very similar to Margin

• Reference

  Property	Description
  padding	A shorthand property for setting all the padding properties in one declaration
  padding-bottom	Sets the bottom padding of an element
  padding-left	Sets the left padding of an element
  padding-right	Sets the right padding of an element
  padding-top	Sets the top padding of an element

Length Unit¶

Absolute Length Units¶

Unit Name	Introduction	Example
px (Pixels)	A pixel is the smallest unit of measure on the screen. The exact size can vary depending on the device's resolution and pixel density.	p { font-size: 16px; }
pt (Points)	A point is equivalent to 1/72 of an inch, commonly used in print media.	p { font-size: 12pt; }
cm (Centimeters)	Centimeters represent a physical measurement, often used for print stylesheets.	div { width: 10cm; }
mm (Millimeters)	Millimeters are another physical measurement unit, used less frequently than centimeters.	div { width: 100mm; }
in (Inches)	An inch is equivalent to 2.54 cm or 96 pixels on screens with a 96 DPI resolution.	div { width: 2in; }
pc (Picas)	A pica is equivalent to 12 points, commonly used in print media.	p { font-size: 1pc; }
Q (Quarter-millimeters)	A quarter-millimeter, primarily used in East Asian typography.	div { width: 40Q; }

Relative Length Units Table¶

Unit Name	Introduction	Example
em (Element)	Relative to the font-size of the element. If not specified, it inherits from the parent.	p { font-size: 2em; }
rem (Root em)	Relative to the font-size of the root element (<html>). Useful for maintaining consistency across an entire page.	p { font-size: 1.5rem; }
ex (x-height)	Relative to the x-height of the current font (the height of the lowercase letter 'x').	p { font-size: 2ex; }
ch (Character)	Relative to the width of the '0' (zero) character in the current font.	div { width: 10ch; }
vw (Viewport width)	Relative to 1% of the viewport's width. Useful for responsive designs.	div { width: 50vw; }
vh (Viewport height)	Relative to 1% of the viewport's height.	div { height: 50vh; }
vmin (Viewport minimum)	Relative to 1% of the smaller dimension (width or height) of the viewport.	div { width: 50vmin; }
vmax (Viewport maximum)	Relative to 1% of the larger dimension (width or height) of the viewport.	div { width: 50vmax; }
% (Percentage)	Relative to the parent element's dimension. Commonly used for responsive layouts.	div { width: 75%; }

Task¶

Objective:¶

• Understand and apply the CSS box model to create a webpage with multiple boxes.

• Learn how to use properties like width, height, padding, border, and margin.

• Explore the box-sizing property to control the size of boxes.

Set Up the HTML Structure¶

• Create a simple HTML file with the following structure

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CSS Box Model Task</title>
      <link rel="stylesheet" href="./02-box-style.css">
  </head>
  
  <body>
      <div class="box box1">Box 1</div>
      <div class="box box2">Box 2</div>
      <div class="box box3">Box 3</div>
      <div class="box box4">Box 4</div>
      <div class="box box5">Box 5</div>
  </body>
  
  </html>
  

Style the Boxes Using Box Model Properties:¶

• Use the box model properties to adjust the size and position of the boxes.

  

Apply the box-sizing Property:¶

Box Sizing	Description	Width Calculation	Height Calculation	Example
content-box	Width and height include only the content. Padding and border are added outside the specified width and height.	Content Width + Padding + Border	Content Height + Padding + Border	content-box
border-box	Width and height include content, padding, and border. The total size is the specified width and height.	Total Width = Specified Width	Total Height = Specified Height	border-box

• Use the box-sizing property to control the box dimensions, including padding and borders.

  

Sample Script¶

body {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Gap between flex items */
    padding: 20px;
    background-color: #f9f9f9;
}

.box {
    width: 150px; /* Content width */
    height: 150px; /* Content height */
    padding: 10px; /* Inside the box */
    border: 2px solid #000; /* Border width */
    margin: 5px; /* Space outside the box */
    text-align: center;
    line-height: 130px; /* Adjusted based on height and padding */
    background-color: #ddd;
}

/* Specific box styles */
.box1 {
    background-color: #ff9999;
}

.box2 {
    background-color: #99ccff;
    width: 200px; /* Different content width */
    height: 200px; /* Different content height */
}

.box3 {
    background-color: #99ff99;
    padding: 20px; /* Different padding */
}

.box4 {
    background-color: #ffcc99;
    border-width: 5px; /* Different border width */
    border-style: dashed; /* Dashed border style */
}

.box5 {
    background-color: #cc99ff;
    margin: 20px; /* Different margin */
    box-sizing: border-box; /* Border-box sizing */
}