Scribd
Upload
30 views

Computer Group 3

The document provides an overview of the CSS box model, which treats HTML elements as boxes and consists of the content, padding, border, and margin. It defines each part of the box model - the content area contains text and images, padding is the transparent space around content, border lines go around the padding, and margin is the transparent space outside the border. The document then provides more details on how to specify different border properties like width, color, and style as well as padding and margin values using pixels, percentages, or keywords like "top", "bottom", "left", and "right".

Uploaded by

Karl Enoc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views

Computer Group 3

The document provides an overview of the CSS box model, which treats HTML elements as boxes and consists of the content, padding, border, and margin. It defines each part of the box model - the content area contains text and images, padding is the transparent space around content, border lines go around the padding, and margin is the transparent space outside the border. The document then provides more details on how to specify different border properties like width, color, and style as well as padding and margin values using pixels, percentages, or keywords like "top", "bottom", "left", and "right".

Uploaded by

Karl Enoc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Using the Box

Model
LESSON 3
Group 3
Box Model
In HTML, elements can be considered as boxes. In CSS, the term box model refers to the design and
layout.
The CSS box model is a box that wraps every HTML element. It consists of the following parts.

Content - Padding - Border - Margin -


refers to the is a space that goes around the clears the area
image or text clears the area padding and outside the
that appears. around the content. border.
content. It is It is also
transparent. transparent.
Box Model
The content is wrapped by padding., which is wrapped by a border, and then wrapped by a margin.
Border
Border-width sets the width of the border. The with is set in
pixels, or by using either thin, medium, or thick.

These are the three predefined values used in border-width.


Border color sets the color of the border. The color can be
set by:
1. name - specify a color name, like "red"
2. RGB - specify an RGB value, like "RGB(255,0,0)"
3. hex - specify a hex value, like "#ff0000"

Border styles can be any of these:

1. dotted - It defines a dotted border.


2. dashed - It defines a dashed border.
3. solid - It defines a solid border.
4. double - It defines two borders. The width of these
borders is the same as the border width value
5. groove - It defines a 3D grooved border. The effect
depends on the border-color value.
6. ridge - It defines a 3D ridged border. The effect depends
on the border-color value.
7. inset - It defines a 3D inset border. The effect depends on
the border-color value.
8. outset - It defines a 3D outset border. The effect depends
on the border-color value.
Margin
Margin - Defines space around elements. It
clears the area around an element (outside the
border) It also does not have a background color
and is completely transparent.

Top margin element values may be defined in


the following way:

Margin - Top: 100px

Margin - Bottom: 100px

Margin - Right: 50px

Margin – Left: 50px


Padding
Padding defines the space the border and the content.

Padding is valuable in making additional space inside an


element, keeping it at a set distance from other aspects of a
website.

Using padding is extremely beneficial when you need to


separate text boxes and images while also keeping them
aligned.

The values may be defined as padding top, padding-right,


padding-bottom, and padding left.

These may be written in the following ways

Padding-top: 10px;

Padding-right: 10px;

Padding-bottom: 10px;

Padding-left: 10px;
Let us recap!
Box model- refers to the design and layout.
<div>- tag defines a section in HTML and groups back
elements to CSS.
Border-width- sets the color of the border.
Border styles- can be dotted, dashed, solid, double,
groove, ridge, inset, and outset
Margin- defines the space around elements.
Padding- defines the space between the border and
the concert.
Thank you
very much!

You might also like