About me

I am a full stack .net developer with 5 years of experience in front-end and back-end technologies like HTML, CSS, Jquery, Angular, Typescript, Bootstrap, C#, MSSQL and Mongodb. I have done Btech Computer engineering from Sigma Institute of Engineering & Technology that comes under GTU (Gujarat Technological University). I have worked on web applications, Web APIs, Windows Forms, Web Forms, Tray applications and corporate websites. Programming is my hobby and I have starting writing blog to provide a platform for those who want to grow their careers as a fullstack .NET developers.

Lesson 2 - Part 5: 10 Important CSS properties: Box sizing, margin, padding

The CSS properties considers all the HTML element to be inside a box, whether be it a text, a url, a division or a paragraph. 

Box Model

To understand the box model, open the example from the activities that we have created and inspect any html element as shown below: 

Image 2.5.1 Box Model

As we take the mouse pointer over any of the HTML element, a box will appear. To get more clarity on that click on computed, next to the styles in the web inspector, it shows the box model for the selected html element as below:

Image 2.5.2 Computed Box Model for H1

Image 2.5.3 Edges of a box model

A box model has four edges:

  1. Content Edge
  2. Padding Edge
  3. Border Edge
  4. Margin Edge

1. Content Edge: The content edge defines the real content area. In our example, as in the image 2.5.2, the area highlighted by blue is the content area. The content area of a block element can be changed by properties like width, min-width, max-width, height, min-height and max-height.

2. Padding Edge: Padding edge defines the padding area of the HTML element. To understand padding edge, let us see what padding is -

Padding

This css property is used to give space around a HTML element i.e this property allows us to give space to the top, right, bottom and left sides of an element.

Image 2.5.4 Syntax of Padding

Here, the values can be either in percentage or length i.e (pt, px, cm, em etc). These units are going to be covered in further topics. Right now, we will be using only px. 

Now, open the example and give padding: 10px 20px 10px 20px to H1 tag as below:

Image 2.5.5 Padding Property

Image 2.5.6 Computed Box Model with Padding Area

Image 2.5.6 shows the top, right, bottom and left padding of the H1 element. The padding property of an element can be defined in below ways:

Image 2.5.7 Ways to Write Padding Property

As shown in the Image 2.5.7, 
  1. Whenever we want different top, right, bottom and left padding we can specify it as padding: value1 value2 value3 value4
  2. If we want to give equal padding to an element we can write it as padding: value. For example: padding:10px gives 10px to the top, right, bottom and left padding
  3. If we want to give equal top-bottom and left-right padding we can write it as padding: value1 value2. Example: padding:10px 20px assigns 10px top-bottom padding and 20px left-right padding
Now, what if we want to give padding to only one of the sides? For that CSS has four properties: padding-top, padding-bottom, padding-right and padding-left.

3. Border Edge: Border edge of a HTML element defines the border area of that element. To understand this let us assign 2px block border to the H1 tag in this example and inspect it as shown below:

Image 2.5.8 Border Property

Image 2.5.9 Border Edge in Computed Box Model

4. Margin Edge: Margin edge defines the margin area of a HTML element. Now, let us see what a margin is -

Margin

Margin CSS property is used to provide space around the HTML elements outside border of the element. The margin of HTML element can be defined same as the padding element as shown below:

Image 2.5.10 Syntax and Ways to Define Margin Property

Now, let us see how margin area in a box model looks like by giving margin: 10px 20px 10px 20px to the H1 element in the example.

Image 2.5.11 Margin Property of H1

Image 2.5.12 Margin Edge and Margin Area in Computed Box Model of H1

Note: The padding and margin given in this example can also be written as padding:10px 20px & margin: 10px 20px, as the top-bottom and left-right properties are same.

This is all about the box layout. Now, let us see what box-sizing means.

CSS Box Sizing

In the above example where we gave H1 padding, border and margin, it can be concluded that the actual width and height of an element is equal to the width of the content + padding + border and height of the content + padding + border respectively as shown below image:

Image 2.5.12 Actual Height of a Content

Due to this, when we set height or width of any element, it appears bigger due to the padding and border. This can be managed by the box-sizing css property. The box-sizing property defines whether to include the padding and border inside the content width or outside based on the requirement.

The box sizing property can be either content-box or border-box. By default, the box-sizing is content-box, which adds padding to the given width and height of the element. Let us see what happens if we give 50px height and 200px width to H1.

Image 2.5.14 Box-sizing content-box

When we take the mouse pointer over H1 in the web inspector, we can see width and height of the element as shown in the above image 2.5.14.

Let us change the box-sizing to border-box. The output would be as below:

Image 2.5.15 Box-sizing border-box

So, by setting box-sizing:border-box, there will be no change in the width and height of the element by increasing or decreasing the padding or border value.
 

Subscribe to Be a full stack .NET developer by Email