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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "'''Title of the script: '''Box Model in CSS '''Author:''' Praveen S '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywor...")
 
 
(One intermediate revision by one other user not shown)
Line 55: Line 55:
 
|-
 
|-
 
|| Slide: CSS Box Model
 
|| Slide: CSS Box Model
−
|| Let us learn to style an '''element''' in '''CSS.'''
+
|| Let us learn to '''style''' an '''element''' in '''CSS.'''
  
−
To style an '''element''', each '''element''' will be considered in the form of a '''box '''with some '''layers'''.
+
To '''style''' an '''element''', each '''element''' will be considered in the form of a '''box '''with some '''layers'''.
  
 
The '''layers''' are:
 
The '''layers''' are:
Line 246: Line 246:
 
|| The way to write the '''shorthand '''property is '''width, style''' and '''color.'''
 
|| The way to write the '''shorthand '''property is '''width, style''' and '''color.'''
  
−
It is mandatory to specify the '''border’s '''style, in the '''shorthand '''property.  
+
It is mandatory to specify the '''border’s style''', in the '''shorthand '''property.  
  
 
Otherwise the property will not work.
 
Otherwise the property will not work.
 
|-
 
|-
 
|| Press Ctrl + S
 
|| Press Ctrl + S
−
|| Save the file'''.'''
+
|| Save the file.
 
|-
 
|-
 
|| Switch to firefox
 
|| Switch to firefox
Line 359: Line 359:
 
|-
 
|-
 
|| Only narration
 
|| Only narration
−
|| Like '''border style''', we can also set different '''width, size''' and '''color '''for each side.
+
|| Like '''border style''', we can also set different width, size and color for each side.
  
 
You may try these on your own, later.  
 
You may try these on your own, later.  
Line 408: Line 408:
 
|| Save the file.
 
|| Save the file.
 
|-
 
|-
−
|| Switch to firefox
+
|| Switch to Firefox
 
|| Switch to the '''browser''' and refresh the page.
 
|| Switch to the '''browser''' and refresh the page.
 
|-
 
|-
Line 432: Line 432:
 
|| Save the file.
 
|| Save the file.
 
|-
 
|-
−
|| Switch to firefox
+
|| Switch to Firefox
 
|| Switch to the '''browser''' and refresh the page.
 
|| Switch to the '''browser''' and refresh the page.
 
|-
 
|-
Line 438: Line 438:
 
|| Observe the change.
 
|| Observe the change.
  
−
The '''Paragraph '''comes under the '''div '''section.
+
The '''paragraph '''comes under the '''div '''section.
  
 
So, the '''margin '''space for the '''paragraph tag '''is '''inherited''' from the '''div tag'''.
 
So, the '''margin '''space for the '''paragraph tag '''is '''inherited''' from the '''div tag'''.
Line 463: Line 463:
  
 
Type: padding: 15px;
 
Type: padding: 15px;
−
|| Let us set the '''padding '''space as 1'''5px.'''
+
|| Let us set the '''padding '''space as '''15px.'''
  
 
Inside the '''div style''' section, next to the '''margin '''property, type the code as shown.
 
Inside the '''div style''' section, next to the '''margin '''property, type the code as shown.
Line 475: Line 475:
 
|| Save the file.
 
|| Save the file.
 
|-
 
|-
−
|| Switch to firefox
+
|| Switch to Firefox
−
|| Switch to the browser and refresh the page
+
|| Switch to the '''browser''' and refresh the page.
 
|-
 
|-
 
|| [firefox] Highlight the output
 
|| [firefox] Highlight the output
Line 500: Line 500:
 
|| In '''CSS''', total width of an '''element''' is calculated as:
 
|| In '''CSS''', total width of an '''element''' is calculated as:
  
−
'''Total width = width + border + padding'''
+
:'''Total width = width + border + padding'''
 
|-
 
|-
 
|| Slide : Height Calculation
 
|| Slide : Height Calculation
Line 507: Line 507:
 
|| And total height of an '''element''' is calculated as:
 
|| And total height of an '''element''' is calculated as:
  
−
'''Total height = height + border + padding'''
+
:'''Total height = height + border + padding'''
 
|-
 
|-
 
|| Slide: Box Sizing
 
|| Slide: Box Sizing
 
|| '''Box Sizing property'''  
 
|| '''Box Sizing property'''  
  
−
* It is used to determine how the '''width''' & '''height''' of an '''element''' is calculated.
+
* It is used to determine how the width and height of an '''element''' is calculated.
 
* Its values are:
 
* Its values are:
 
** '''content-box'''
 
** '''content-box'''
Line 523: Line 523:
  
 
* It is the default '''CSS Box Model'''.
 
* It is the default '''CSS Box Model'''.
−
* The '''width''' & '''height''' assigned to an '''element''' is applied only to the '''content area'''.
+
* The width and height assigned to an '''element''' is applied only to the '''content area'''.
−
* So in the total or final '''width''' and '''height'''<nowiki>; </nowiki>'''padding''' and '''border''' are added.
+
* So in the total or final width and height, '''padding''' and '''border''' are added.
  
 
|-
 
|-
Line 530: Line 530:
 
|| '''border-box'''
 
|| '''border-box'''
  
−
* '''Padding''' and '''border''' assigned to an '''element '''is adjusted in the '''width''' & '''height''' property.
+
* '''Padding''' and '''border''' assigned to an '''element '''is adjusted in the width and height property.
 
* And the '''content area''' shrinks to accommodate them.
 
* And the '''content area''' shrinks to accommodate them.
−
* In the total or final '''width '''and''' height;''' '''padding''' and '''border''' are not added.
+
* In the total or final width and height,''' '''padding''' and '''border''' are not added.
  
 
|-
 
|-
 
|| [firefox] Highlight box
 
|| [firefox] Highlight box
−
|| Here, the '''width '''of the '''box''' = '''width '''+ '''padding '''+ '''border'''
+
|| Here, the width of the '''box''' = width + '''padding '''+ '''border'''
 
|-
 
|-
 
|| [gedit - mystyle.css]
 
|| [gedit - mystyle.css]
Line 555: Line 555:
 
|| Observe the change.
 
|| Observe the change.
  
−
The text has come out of the '''box''' as its '''width''' and '''height''' are reduced.
+
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.'''
 
That is, the box size shrunk to accommodate the '''50% width.'''
Line 570: Line 570:
 
|| Inside the '''div style''' section, delete the code as shown.
 
|| Inside the '''div style''' section, delete the code as shown.
  
−
By doing this, we are not restricting the '''height'''.
+
By doing this, we are not restricting the height.
 
|-
 
|-
 
|| [gedit - mystyle.css]
 
|| [gedit - mystyle.css]
Line 582: Line 582:
 
|| Save the file.
 
|| Save the file.
 
|-
 
|-
−
|| Switch to firefox
+
|| Switch to Firefox
 
|| Switch to the '''browser''' and refresh the page.
 
|| Switch to the '''browser''' and refresh the page.
 
|-
 
|-
Line 589: Line 589:
 
|| Observe the change.
 
|| Observe the change.
  
−
Now you can see the '''width''' of the''' '''box has not changed.
+
Now you can see the width of the '''box''' has not changed.
  
 
This is because of '''box sizing''' property.
 
This is because of '''box sizing''' property.
  
−
A '''padding '''of '''30px '''is added and the '''content''' inside the '''box''' is adjusted.  
+
A '''padding '''of '''30px '''is added and the content inside the '''box''' is adjusted.  
 
|-
 
|-
 
|| [gedit - mystyle.css] Update: padding: 50px;
 
|| [gedit - mystyle.css] Update: padding: 50px;
Line 600: Line 600:
 
|| Try changing the '''padding '''to '''50px''' and observe the output.
 
|| Try changing the '''padding '''to '''50px''' and observe the output.
  
−
You can see the width of the box has not changed.
+
You can see the width of the '''box''' has not changed.
 
|-
 
|-
 
|| [gedit - mystyle.css]
 
|| [gedit - mystyle.css]
Line 618: Line 618:
 
|| Switch to the '''browser''' and refresh the page.
 
|| Switch to the '''browser''' and refresh the page.
 
|-
 
|-
−
|| [firefox] Highlight the output
+
|| [Firefox] Highlight the output
 
|| Observe the change.
 
|| Observe the change.
  
−
Still the '''width '''of the '''box''' has not changed.
+
Still the width of the '''box''' has not changed.
  
 
This is because of the '''box sizing''' property.
 
This is because of the '''box sizing''' property.
Line 644: Line 644:
 
|| Observe the change.
 
|| Observe the change.
  
−
Now we can see the '''width''' of the''' box''' has increased.
+
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.
 
As we have added the '''padding '''and '''border, '''the width of the '''box''' has increased.
Line 699: Line 699:
 
|| Slide: Assignment
 
|| Slide: Assignment
 
|| As an assignment
 
|| As an assignment
−
 
 
* Open the file '''styles.css''' which you have created earlier.
 
* Open the file '''styles.css''' which you have created earlier.
 +
 +
|-
 +
|| Slide: Assignment
 +
||
 
* Set the following '''styles''' for the '''div tag'''
 
* Set the following '''styles''' for the '''div tag'''
−
* '''Solid border''' for the '''left '''and '''right '''side
+
** '''Solid border''' for the '''left '''and '''right '''side
−
* '''Dotted border''' for the '''bottom'''
+
** '''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'''
  
 
|-
 
|-
 
|| Slide: Assignment
 
|| Slide: Assignment
 
||  
 
||  
−
* 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
 
* Link the '''styles.css''' file to '''webpage.html''' file
 
* Observe the output
 
* Observe the output
Line 734: Line 737:
 
|-
 
|-
 
|| Slide: Thanks
 
|| Slide: Thanks
−
|| The script for this tutorial is contributed by Praveen
+
|| The script for this tutorial is contributed by Praveen.
  
−
and this is Madhuri Ganapathi from IIT Bombay.
+
And this is Madhuri Ganapathi along with Neha Solanki from IIT Bombay.
  
 
Thank you for watching.
 
Thank you for watching.
 
|-
 
|-
 
|}
 
|}

Latest revision as of 10:29, 15 October 2020

Title of the script: Box Model in CSS

Author: Praveen S

Domain Reviewer: Ankita Maske, Om Prakash Soni

Novice Reviewer: Madhuri Ganapathi

Keywords: CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Property, CSS Box Model, CSS Border, CSS Margin, CSS Padding


Visual Cue Narration
Slide: Title Welcome to the spoken tutorial on “Box Model in CSS”.
Slide: Learning Objectives In this tutorial we will learn about:
  • The Box Model
  • Border
  • Margin
  • Padding
  • Box sizing
Slide:

System Requirements

This tutorial is recorded using
  • 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.

Slide: Prerequisite

https://spoken-tutorial.org

To practise this tutorial, you should have basic knowledge of HTML and CSS.

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

Slide: Code Files The files used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract them.

Make a copy and then use them while practising.

Slide: CSS Box Model Let us learn to style an element in CSS.

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
Slide: CSS Box Model

Image of CSS Box Model

This is how the CSS Box model looks like.

Each layer has some properties of its own.

Let us understand these one by one through examples.

Slide: Border The border layer has the following properties
  • Style
  • Width
  • Color
  • Individual Sides
Slide: Border
border-style border-bottom-style
border-width border-right-style
border-color border-left-style
border-top-style
These are how the border properties are defined.
Open my-css folder Go to the practice folder my-css.
Open mystyle.css Let’s open the file mystyle.css in a text editor.

I have already opened it in the gedit Text Editor.

[gedit - mystyle.css] Highlight

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

background-color: lightgreen; }

We have set the style for a div tag.

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

[gedit - mystyle.css]

Type: border-style: solid;

To set the border I will add some properties.

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

[gedit - mystyle.css] Highlight

border-style: solid;

I want a solid border, so in the value I have mentioned solid.
Press Ctrl + S Save the file.
Open Mypage.html in firefox Switch to the my-css folder.

Open the file Mypage.html in a web browser.

[Firefox]

Highlight the border

Observe the output.

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

Slide: Border Styles

dotted solid dashed

double groove ridge

inset outset none hidden

These are all the available border styles that can be used.
[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css] Update:

border-style: dotted;

Instead of solid, let me change it to dotted.

Update the code as shown here.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Highlight the output

Observe the output.

Now the solid border is changed to a dotted border.

Explore the other different border styles on your own later.

[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css] Update

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

background-color: lightgreen;

border-style: dotted;

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

Update the div style as shown.
[gedit - mystyle.css] Highlight

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

I have set the border width as 7 pixels and changed the border color to red.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Highlight the output Observe the output.

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

[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css] Highlight

border-style: dotted;

border-width: 7px;

border-color: red;

To style the div border so far we have used 3 lines of code.
[gedit - mystyle.css] Delete:

border-style: dotted;

border-width: 7px;

border-color: red;

In CSS we have a property called shorthand to simplify this.

Let us understand this with an example.

First, delete these 3 lines.

[gedit - mystyle.css] Type:

border: 7px dotted red;

Now, next to the background-color property, type the code as shown.
[gedit - mystyle.css] Highlight

border: 7px dotted red;

The way to write the shorthand property is width, style and color.

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

Otherwise the property will not work.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[firefox]

Highlight the output

There’s no change in the output.

This indicates that our shorthand method worked.

Only narration In CSS we can set different border styles for each side.

Let us try this.

[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css]

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;

Inside the div style, next to border property, type the code as shown.
[gedit - mystyle.css] Highlight

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;

Here I have set the border style for the top and bottom as solid, and for right and left as dotted.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[firefox]

Highlight the output

Observe the output.

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

[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css] Highlight

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;

To style the div border we have used 4 lines of code.

The same can be written in a single line.

[gedit - mystyle.css] Delete

border-top-style: solid;

border-right-style: dotted;

border-bottom-style: solid;

border-left-style: dotted;

First, delete these 4 lines.
[gedit - mystyle.css] Type:

border-style: solid dotted solid dotted;

Now, next to the border property, type the code as shown.
[gedit - mystyle.css] Highlight:

border-style: solid dotted solid dotted;

Here I have set the border style type without mentioning the sides.

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

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[firefox]

Highlight the output

Again, there is no change in the output.

Which means our simplified code worked well.

Only narration Like border style, we can also set different width, size and color for each side.

You may try these on your own, later.

Only narration The next layer which we are going to see is margin.
[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css]

Type: margin: 1cm;

Next to the border style property, type the code as shown.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[firefox]

Highlight the output

Observe the change.

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

[firefox] Point to borders. We can set margins for each side either individually or in a single line.
[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css] Update:

margin: 1cm 2cm 3cm 4cm;

Inside the div tag, update the margin property as shown.
[gedit - mystyle.css] Highlight:

margin: 1cm 2cm 3cm 4cm;

Here I have set the margin without mentioning the sides.

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

Press Ctrl + S Save the file.
Switch to Firefox Switch to the browser and refresh the page.
[firefox] Highlight the output Observe the change.
[gedit - mystyle.css] Highlight:

margin: 1cm 2cm 3cm 4cm;

What if we wish to inherit the margin space based on the parent element?

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

[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css] Type:

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

Update the style properties of the paragraph tag as shown.
Press Ctrl + S Save the file.
Switch to Firefox Switch to the browser and refresh the page.
[firefox] Highlight the output Observe the change.

The paragraph comes under the div section.

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

[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css]

Delete margin: inherit;

Update the style properties of the paragraph tag as shown.
Slide: Padding The next layer which we are going to see in the CSS Box model, is Padding.

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

Let us learn this through some examples.

[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css]

Type: padding: 15px;

Let us set the padding space as 15px.

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

[gedit - mystyle.css] Update:

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

Let us comment the margin property to see the padding difference clearly.
Press Ctrl + S Save the file.
Switch to Firefox Switch to the browser and refresh the page.
[firefox] Highlight the output Observe the change.

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

Only narration Like border and margin we can also set different padding sizes to all the four sides.

These can be set either separately or all together.

Slide : Note
  • 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.

Slide : Width Calculation

Image : Width

In CSS, total width of an element is calculated as:
Total width = width + border + padding
Slide : Height Calculation

Image : Height

And total height of an element is calculated as:
Total height = height + border + padding
Slide: Box Sizing Box Sizing property
  • It is used to determine how the width and height of an element is calculated.
  • Its values are:
    • content-box
    • border-box

Let us understand this with some examples.

Slide: content-box content-box
  • It is the default CSS Box Model.
  • The width and 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.
Slide: border-box border-box
  • Padding and border assigned to an element is adjusted in the width and height property.
  • And the content area shrinks to accommodate them.
  • In the total or final width and height, padding and border are not added.
[firefox] Highlight box Here, the width of the box = width + padding + border
[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css] Type:

box-sizing: border-box;

Inside the div style section, next to the padding property, type the code as shown.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[firefox] Highlight the output Observe the change.

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.

Only narration Let's do some more changes.
[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css]

Delete: height: 2cm;

Inside the div style section, delete the code as shown.

By doing this, we are not restricting the height.

[gedit - mystyle.css]

Update: padding: 30px;

Now we will change the padding from 15px to 30px.

Update the code as shown.

Press Ctrl + S Save the file.
Switch to Firefox Switch to the browser and refresh the page.
[firefox] Highlight the output Observe the change.

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.

[gedit - mystyle.css] Update: padding: 50px;

Switch to firefox and refresh the page

Try changing the padding to 50px and observe the output.

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

[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css]

Update: border: 17px dotted red;

Now change the border from 7px to 17px.

Update the border property as shown.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox] Highlight the output Observe the change.

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.

[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.css]

Update:box-sizing: content-box;

Inside the div style section, update the box sizing property as shown.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[firefox] Highlight the output Observe the change.

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.

Only narration Now I will update the div section for the required properties on this page.
[gedit - mystyle.css] Switch to mystyle.css file in the text editor.
[gedit - mystyle.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; }

Update the div section as shown here.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[firefox] Highlight the output Observe the output.

This is our required page.

Only narration With this we have come to the end of this tutorial.

Let us summarize.

Slide: Summary In this tutorial, we have learnt about
  • The Box Model
  • Border
  • Margin
  • Padding
  • Box sizing
Slide: Assignment As an assignment
  • Open the file styles.css which you have created earlier.
Slide: Assignment
  • 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
Slide: Assignment
  • Link the styles.css file to webpage.html file
  • Observe the output
Slide:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide: Spoken Tutorial Workshops The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide: Forum Please post your timed queries on this forum.
Slide: Acknowledgement Spoken Tutorial project is funded by Ministry of Education (MoE), Govt. of India.
Slide: Thanks The script for this tutorial is contributed by Praveen.

And this is Madhuri Ganapathi along with Neha Solanki from IIT Bombay.

Thank you for watching.

Contributors and Content Editors

Nancyvarkey, Nehasolanki

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C2/Box-Model-in-CSS/English&oldid=54036"