Difference between revisions of "CSS/C2/Box-Model-in-CSS/English"

• The Box Model
• Border
• Margin
• Padding
• Box sizing

System Requirements

• Ubuntu Linux OS v 18.04
• CSS3
• HTML5
• gedit Text Editor
• Firefox web browser

However you may use any other editor or browser of your choice.

https://spoken-tutorial.org

If not, please go through the HTML and CSS tutorials on this website.

Please download and extract them.

Make a copy and then use them while practising.

To style an element, each element will be considered in the form of a box with some layers.

The layers are:

• Border
• Margin
• Padding
• Content

Image of CSS Box Model

Each layer has some properties of its own.

Let us understand these one by one through examples.

• Style
• Width
• Color
• Individual Sides

I have already opened it in the gedit Text Editor.

div { width: 50%; height: 2cm;

background-color: lightgreen; }

Let us use the same to explain the CSS Box Model.

Type: border-style: solid;

Inside the div tag, next to background-color property, type the code as shown.

border-style: solid;

Open the file Mypage.html in a web browser.

Highlight the border

We see a black colored solid border around the div section.

dotted solid dashed

double groove ridge

inset outset none hidden

border-style: dotted;

Update the code as shown here.

Highlight the output

Now the solid border is changed to a dotted border.

Explore the other different border styles on your own later.

div { width: 50%; height: 2cm;

background-color: lightgreen;

border-style: dotted;

border-width: 7px; border-color: red; }

border-width: 7px; border-color: red;

Now we have a dotted red border with the width as 7 pixels.

border-style: dotted;

border-width: 7px;

border-color: red;

border-style: dotted;

border-width: 7px;

border-color: red;

Let us understand this with an example.

First, delete these 3 lines.

border: 7px dotted red;

border: 7px dotted red;

It is mandatory to specify the border’s style, in the shorthand property.

Otherwise the property will not work.

Highlight the output

This indicates that our shorthand method worked.

Let us try this.

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;

Highlight the output

The border styles for each side have changed as per the given input.

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;

The same can be written in a single line.

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;

border-style: solid dotted solid dotted;

border-style: solid dotted solid dotted;

The order according to CSS is - top, right, bottom, left.

Highlight the output

Which means our simplified code worked well.

You may try these on your own, later.

Type: margin: 1cm;

Highlight the output

A 1 cm of margin space is set to the div section from all the four sides.

margin: 1cm 2cm 3cm 4cm;

margin: 1cm 2cm 3cm 4cm;

The order according to CSS is - top, right, bottom, left.

margin: 1cm 2cm 3cm 4cm;

To do that, instead of values, we have to type inherit.

p { width: 75%; margin: inherit; }

The Paragraph comes under the div section.

So, the margin space for the paragraph tag is inherited from the div tag.

Delete margin: inherit;

Padding is a concept to set some space between the border and the content.

Let us learn this through some examples.

Type: padding: 15px;

Inside the div style section, next to the margin property, type the code as shown.

/*margin: 1cm 2cm 3cm 4cm;*/

A padding space of 15 pixels is set to the content inside the div section.

These can be set either separately or all together.

• Elements of HTML come with some default margin and padding.
• Not setting these properties doesn't mean it will be absent.

You can try this on your own later.

Image : Width

Total width = width + border + padding

Image : Height

Total height = height + border + padding

• It is used to determine how the width & height of an element is calculated.
• Its values are:
  • content-box
  • border-box

Let us understand this with some examples.

• It is the default CSS Box Model.
• The width & height assigned to an element is applied only to the content area.
• So in the total or final width and height; padding and border are added.

• Padding and border assigned to an element is adjusted in the width & height property.
• And the content area shrinks to accommodate them.
• In the total or final width and height; padding and border are not added.

box-sizing: border-box;

The text has come out of the box as its width and height are reduced.

That is, the box size shrunk to accommodate the 50% width.

Delete: height: 2cm;

By doing this, we are not restricting the height.

Update: padding: 30px;

Update the code as shown.

Now you can see the width of the box has not changed.

This is because of box sizing property.

A padding of 30px is added and the content inside the box is adjusted.

Switch to firefox and refresh the page

You can see the width of the box has not changed.

Update: border: 17px dotted red;

Update the border property as shown.

Still the width of the box has not changed.

This is because of the box sizing property.

Only the size of the border has increased.

Update:box-sizing: content-box;

Now we can see the width of the box has increased.

As we have added the padding and border, the width of the box has increased.

In this way, we can use box-sizing property in CSS.

div { width: 50%; height: 2cm;

background-color: lightgreen;

border: 7px dotted red;

border-style: solid dotted solid dotted;

/*margin: 1cm 2cm 3cm 4cm;*/

padding: 15px; }

This is our required page.

Let us summarize.

• The Box Model
• Border
• Margin
• Padding
• Box sizing

• Open the file styles.css which you have created earlier.

• Set the following styles for the div tag
  • Solid border for the left and right side
  • Dotted border for the bottom
  • No border for the top
  • Margin space for all the sides as 10px
  • Padding space for the left and right side as 15px

• Link the styles.css file to webpage.html file
• Observe the output

About Spoken Tutorial project

Please download and watch it.

For more details, please write to us.

and this is Madhuri Ganapathi from IIT Bombay.

Thank you for watching.