RITIKA AGRAWAL

SIMPLIFYING
CSS

Beginner’s Guide to Understanding Layouts

 Contents

a. How is a web page rendered? ………………….….….….…1

b. What is CSS Box Model? …………………………...….……..2

c. Structure of CSS Box Model…….………….……….….…….5

d. Content Area ……………………………..…….….…….…….6

e. Padding Area …….………………………….………….…..…9

f. Border Area ……………………..…….……...……..….…….10

g. Margin Area………………………….…………..….….…..…16

h. Margin Collapsing…….……………………………….……..20

i. Box Model for Inline Elements …………...………..……….22

j. Calculating Width and Height of Elements …………...….23

k. Outline and Box shadow Property …………….…….….…25

l. Test Your Knowledge …………...…………………..…..…..26

m. Solutions .……………………………………………….……28
 How is a web page rendered?

• A browser reads an HTML document and creates a DOM tree.

• DOM stands for Document Object Model.
• In DOM, every element written in HTML code is represented as a
tree node.
• Browser then reads the CSS Stylesheet and creates a CSSOM tree.
• Both DOM and CSSOM together generate a third tree known as
rendering tree.
• This rendering tree is used to place elements on a web page,
where browser considers each element as a rectangular box.

Figure 1: DOM tree representation for an HTML code

CSS Box Model is used to describe the size of these rectangular boxes
which represent each web page element.

Page | 1
 What is CSS Box Model?

• In CSS Box Model, every element of a web page is considered to

be contained in a box.
• It helps to determine how much space an element takes up in the
page layout and how different elements are placed around each
other.

We have a “culture section” of a web page. This blue box is the

rectangular box which wraps the <section> tag of entire culture
block.

Page | 2
Culture section further has a heading on the left side and a block of 3
cards on the right. All these components also have a box wrapped
around them.

Above image shows the rectangular box for the side heading and below
image shows the rectangular box of the “culture” cards block.

Page | 3
Here above image shows the rectangular box of each “culture”
card. In this way, every component of a web page can be broken
down into boxes.

• All these rectangular boxes are defined with CSS Box Model.
• They define the space occupied by an element in a page
layout and can be arranged to make complex page layouts
also.

Page | 4
 Structure of CSS Box Model

Every box is composed of 4 main parts →

1. Content Area : It is the space where the content of an element
goes. Any content like image, text or child elements are rendered
in this area.
2. Padding Area : This specifies the space between content and
border of an element. It is used to provide a breathing space to an
element’s content.
3. Border Area : This is where the border of an element is displayed.
4. Margin Area : This specifies the space surrounding an element. It
helps to maintain gap between adjacent elements.

Figure 2: CSS Box Model

Page | 5
 Content Area

• An element can have any content be it – text , images or some other

child elements.
• All these contents control the size of the box which wraps around
an element.

In case no width or height is applied to an element, browser takes up

space according to its content.

Suppose we have an <article> tag with some random content →

<article>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia cum,
alias facilis aperiam, tenetur ad omnis accusantium fugiat saepe culpa?
Voluptate molestias, cum nulla soluta nisi maxime ullam maiores
blanditiis!
</article>

Then we assign it some CSS properties →

article {
border: 2px solid purple;
padding:1em;
}

Page | 6
For this <article> tag since no specific width & height were mentioned in
CSS, browser will take up as much space is required to show the content
inside <article> tag.

Figure 3: Browser itself sets width & height to <article>

This is known an intrinsic sizing when the browser itself decides on

the size of an element based on its content.

Now let’s add width & height to <article> tag →

article {
border: 2px solid purple;
padding:1em;
width:150px;
height:150px;
}

Page | 7
 On adding width & height to <article>, we
notice that since the content was too large
to fit in the box, it has overflowed out of the
border of <article>.
This is known an extrinsic sizing when
we ourselves mention the width and
height of an element with CSS
properties.

To prevent overflow of content outside its element’s border, we can →

• Use min-content value for width : this keyword will assign the
minimum width required to fit in the content.
• Use overflow property to add scrollbars or hide the overflowing
content.
• Use text-overflow property add ellipsis to show that some content is
overflowed.

Content Area therefore controls the size of an element and in turn

controls how much space an element occupies in the page layout. It can
be treated as the most variably sized area and is an important part of box
model.

Page | 8
 Padding Area

• Padding area is the space between the content area and the
border.
• It provides a breathing space to content and hence makes it easier
to read and the design cleaner.
• It is defined by padding property. Padding doesn’t take negative
values.

Padding Shorthand Property

padding is a shorthand property used to mention the padding on all 4
sides – top, right , bottom and left.

Padding Longhand Property

To target each side individually, padding longhand properties can be
used → padding-left, padding-top, padding-bottom and padding-right.

article{
padding-top: 20px;
padding-right: 35px;
padding-bottom: 50px;
padding-left: 45px;
}
Page | 9
 Border Area

• Border area is the space between padding area and margin area.
• It is where the border of an element is displayed using border
property.

CSS provides properties to style color, width and choose a type of border
for each side.

Styling Top Border

Top border can be styled using its shorthand and longhand versions.
Longhand

article{
border-top-width: 8px;
border-top-color: green;
border-top-style: dotted;
}

Shorthand
border-top property is shorthand for styling width, color and adding
type of border with just one property.

article {
border-top: 8px dotted green;
}

Page | 10
Styling Bottom Border
Bottom border can be styled using its shorthand and longhand versions.
Longhand

article{
border-bottom-width: 5px;
border-bottom-color: blue;
border-bottom-style: dashed;
}

Shorthand
border-bottom property is shorthand for styling width, color and adding
type of border with just one property.

article {
border-bottom: 5px dashed blue;
}

Styling Left Border

Left border can be styled using its shorthand and longhand versions.
Longhand

article{
border-left-width: 5px;
border-left-color: pink;
border-bottom-style: solid;
}

Page | 11
Shorthand
border-left property is shorthand for styling width, color and adding type
of border with just one property.

article {
border-left: 5px solid pink;
}

Styling Right Border

Right border can be styled using its shorthand and longhand versions.
Longhand
article{
border-right-width: 5px;
border-right-color: orange;
border-right-style: double;
}

Shorthand
border-right property is shorthand for styling width, color and adding
type of border with just one property.

article {
border-right: 5px double orange;
}

Page | 12
 Different Border Styles

border-style : solid border-style : dotted

;

border-style : dashed border-style : inset

;

Page | 13
border-style : outset border-style : ridge

border-style : groove border-style : double

Page | 14
Styling Border for all sides
To apply similar styles to all border sides – we have border property.

Longhand

article{
border-width: 10px;
border-color: #5865F2;
border-style: double;
}

Here border-width, border-style and border-color applies to all 4 sides.

Shorthand
border property is shorthand for styling width, color and adding type of
border for all 4 sides with just one property.

article {
border: 10px double #5865F2;
}

Page | 15
 Margin Area

• Margin Area is the outermost layer of CSS Box Model.

• It doesn’t control the size of an element but it does control its
position in the layout.
• CSS Box Model is about how elements appear on a page layout.
Thus, margin is included in this model.
• It is defined by margin property and can take negative values also.

Margin Shorthand Property

margin is a shorthand property used to mention the margin on all 4 sides
– top, right , bottom and left.

Margin Longhand Property

To target each side individually, margin longhand properties can be
used →
• margin-left
• margin-top
• margin-bottom
• margin-right

Page | 16
For this example, I will wrap a <section> tag around the <article> tag →

<section class="container">
<article>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Mollitia cum, alias facilis aperiam
</article>
</section>

Then we assign some CSS properties to both “container” and

<article> →

.container {
border: 2px solid blue;
}
article{
width: 150px;
padding: 0.5em;
background-color: #FFCBA4;
}

Since no margin is added to <article>, it touches the border of

“container”.

Page | 17
Adding Left Margin

article{
margin-left: 30px;
}

article{
margin-left: -30px;
}

Adding Right Margin

article{
margin-right: 45px;
}

article{
margin-right: -45px;
}

Page | 18
Adding Top Margin

article{
margin-top: 40px;
}

article{
margin-top: -40px;
}

Adding Bottom Margin

article{
margin-bottom: 25px;
}

article{
margin-bottom: -25px;
}

Page | 19
 Margin Collapsing

• Top and bottom margin of elements are sometimes combined into

a single margin depending on their values. This is known as margin
collapsing.
• Margins do not collapse for elements which are floated or
absolutely positioned.
• Margins also do not collapse for flex box containers.

Case 1 : Adjacent Siblings

I have 2 paragraphs – first para has margin-bottom of 20px and second
para has margin-top of 30px.

Here the margins of both paragraphs collapsed to just 30px.

• Two positive margins combine to the larger value. Like in above

example 20px and 30px merged to form a gap of 30px.
• Two negative margins combine to the lower value. Margin of -30px
and -50px merge to form a gap of -50px.
• If one margin is positive and other is negative, then negative
margin is subtracted from the positive value.

Page | 20
Case 2 : Between Parent and its children
I have a <section> which holds 2 paragraphs – first para has a margin-top
of 20px and margin-bottom of 30px. Second paragraph has a margin-
bottom of 30px.
<section> is given margin-top and margin-bottom of 20px.
Two more paragraphs are used → one above the <section> tag and one
below it.

Here margin-top of first paragraph and that of <section> merged to

20px. Margin-bottom of second paragraph and <section> merged to
form a gap of 30px.

• When there is no border or padding between parent and its child

elements, top and bottom margins of parent and its children
collapse according to the rules mentioned before.

Page | 21
 Box Model for Inline Elements

• All box properties – padding, margin, border apply to block level

tags.
• For inline level elements, only some of these properties show
results.

Suppose, we have a <span> tag and apply all the box properties to it →

• Padding applies on all 4 sides.

• Border also applies for all 4 sides.
• For margin, only horizontal margin shows result. Vertical margin
does not show any change.
• Horizontal margin moves other content away but in case of vertical
margins, vertical padding and borders, the <span> tag overlaps
with other content.
• Even height and width do not apply to inline elements. They take
up minimum width and height required to fill their content.

To solve this issue of overlapping with other content, use inline-block

value of display property.
Page | 22
 Calculating Width and Height of Elements

• For any element, width is calculated by adding horizontal padding

and horizontal border width to the value of width assigned via
width property.
• Height is calculated by adding vertical padding and vertical border
to the value of height assigned via height property.

article{
border: 10px solid #B8860B;
padding: 20px;
width: 300px;
height: 80px; }

For this <article> tag,

• Width = width value + left padding + right padding + left border +
right border.
• Height = height value + top padding + bottom padding + top
border + bottom border.
Page | 23
 • There is property in CSS called box-sizing.
• Its default value is content-box, because of this value padding and
border gets added in width and height of an element.
• With border-box value, border and padding is included in the
values of width and height that is assigned via CSS.

article{
border: 10px solid #B8860B;
padding: 20px;
width: 300px;
height: 150px;
box-sizing: border-box;
}

For this <article> tag,

• Width = width value = left padding + right padding + left border +
right border + space taken by content
• Height = height value = top padding + bottom padding + top
border + bottom border + space taken by content
Page | 24
 Outline and Box-shadow Property

• Both Outline and Box-shadow property lie in the margin area.

• These properties do not take a space of their own.
• As they do not take up space, they do not affect the size or position
of an element and hence they are not part of CSS Box Model.

.middle{
outline: 20px solid #C8A2C8;
box-shadow: 0 0 15px 20px #ff0000;
}

• To the middle box, I’ve applied an outline of 20px and a box-

shadow of red color.
• Both these properties overlap their results with the siblings of
middle box and do not occupy their own space. They are just
painted on top of the margin area.
• Hence outline and box-shadow are not a part of CSS Box Model.

Page | 25
 Test Your Knowledge

1) Which of the following is not a part of CSS Box Model?

a. Margin b. Padding
c. Outline d. Border

2) Can padding take negative values?

a. No b. Yes
c. May be d. Not sure

3) Which part of Box Model clears space around content of an

element?

a. Padding b. Margin
c. Border d. None of the above

4) Which value of box-sizing property includes padding and border in

calculations of width and height of an element?

a. content-box b. inherit
c. padding-box d. border-box

5) Which border property decides style of left border?

a. border-right-style b. border-left-width
c. border-left-style d. border-right-width

Page | 26
6) Outline of an element appears in which part of Box Model?

a. Padding area b. Margin area

c. Border area d. Content area

7) Which property is used to prevent overflow of content?

a. overflow b. text-overflow
c. wrap d. word-spacing

8) Which of the following does not control an element’s size?

a. Padding b. Border
c. Content d. Margin

9) Does margin-top work on inline elements?

a. Yes b. No
c. Sometimes d. May be

10) Padding shorthand property has values in which order?

a. right bottom left top b. top bottom left right

c. top right bottom left d. left bottom right top

Page | 27
 Solutions

1) c. Outline

2) a. No

3) a. Padding

4) d. border-box

5) c. border-left-style

6) b. Margin area

7) a. overflow

8) d. Margin

9) b. No

10) c. top right bottom left

Page | 28
 Author’s Note

Thank you for reading “Simplifying CSS Box Model”.

I hope this ebook was helpful to you and my explanation could help you
understand CSS Box Model in simpler terms.

For more content around CSS, follow me on →

a. Twitter : https://twitter.com/RitikaAgrawal08
b. CodePen : https://codepen.io/RitikaAgrawal08

Read my blogs on →
c. Medium : https://medium.com/@ritikaagrawal08

Check out my projects on →

d. GitHub : https://github.com/Ritika-Agrawal811

Page | 29