CSS 3 Box Model & Padding

CSS 3 Box Model & Padding in CSS3

While coding and understanding HTML or web designing we come to know two types of HTML tags block and inline and if by using some style we highlight their borders then we come to know every HTML tag is a box. CSS Box Model terms is used for layout that’s how the content on site is arranged.

Before further details I take a simple example to understand the concept of Box Model in CSS. So I take a heading <h1> and by using style attribute I highlight its border.

css 3 box
css 3 box

So in the pic above it only show the border and now we come to know that block elements capture full width of screen. And <h1> is a block element.

A box like above in figure have four parts:

  1. Border: It’s around the element and the content in that element. basically it shows the height and width of box.

2. Padding: it’s the outer boundary of the content to separate from other content.

3. Margin:  it’s the distance between content and the border.

  1. Content: It’s the main thing/data that element contain.

Now we have these four things and to understand these we apply one by one on h1 tag.

to separate elements from each other we use class and id, priority of id is more than the priority of class. In order to apply css on same tags separately, we differentiate them through id and class. In the above example, we use class  and to point to that class through css .[class name] is used which is in this case .head and .head1.

padding margin and border in css
padding margin and border in css

As seen in the above pic in first heading I put no style on it so it uses the default margin and padding on tag <h1>. In second when I put margin, border and padding 1px then 1px border wrap around the heading and it 1px padding .and in third example when I put all properties 10px the it show 10px padding which is distance between content and its border.10px wide border and then 10px of distance from all the side of that border .

So to calculate the height of this box model we use the following formulae.

Box-height = (margin + padding + border + content)

Padding:

This Property is used to put some space around the content of an elements. It put a white space between content and border. By default, the color of padding will be white but as we change the background color of the element then padding color also equal to background color.

padding in css3
padding in css3

So as seen above the heading element have 100px padding and 1px border and margin is not set so it is 0px. Another thing to be noted here is padding have white color because background color was not set yet and if we set background color then the padding color change and turn to background color.

padding and background color css
padding and background color css

It’s padding all around the content and if we just want to put padding on a specific side then we have further 4 sub padding properties.

a. Padding-top

b. Padding-left

c. Padding-right

d. Padding-bottom

We also define one by one all the side by using only simple padding property

If the padding property has four values:

  • padding: 5px 10px 25px 0px;
    • top padding is 5px
    • right padding is 10px
    • bottom padding is 25px
    • left padding is 0px

If the padding property has three values:

  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px

If the padding property has two values:

  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px

If the padding property has one value:

  • padding: 25px;
    • all four paddings are 25px

Now let’s use all these properties in developer tools of Firefox. I use Firefox developer tool because it’s efficient and responsive.

So to start Firefox developer tool style editor make a simple heading and its style tag and save as .html extension and run in Mozilla Firefox.

Press shift + F7 to open style editor in Mozilla.

firefox developer tools
firefox developer tools

a. padding-left

padding left in css3
padding left in css3

b. padding-right

padding right in css3
padding right in css3

c. padding-top

padding top in css3
padding top in css3

d. padding-bottom

padding bottom in css3
padding bottom in css3

e. padding: top right bottom left

padding top right bottom left in css3
padding top right bottom left in css3

f. padding: top left+right bottom

padding top left, right bottom in css3
padding top left, right bottom in css3

g. padding: top+bottom left+right

padding top+bottom, left+right in css3
padding top+bottom, left+right in css3

all sides padding in css
all sides padding in css