How to use Padding property in block elements in css

SUBSCRIBE

In this tutorial we discussed a little on padding property and its parameters; Its different usage and calculations in order to make a proper div alignment. As an example, there is a problem that we face in case if we provide a padding of 100px flat to a container. We will witness that in case of a 1000px mother-wrapper, it will
turn into a 1200px container due to usage of padding-left and padding-right, each of 100px; as we provided a padding of 100px
flat, that means 100px for each top, right, bottom and left position. This indeed is a problem in every cases as it increases the
width to a higher value, and in case of mobile responsive view, it will render the web page to appear with a horizontal scroll. So,
calculations must be made in order such that the block renders both padding and its actual width while displaying the web page into browser.

Things those we are going to learn in this tutorial are:

1) What is padding
2) Working principle of padding
3) What happens if we provide a padding, for say, 100px to the mother-wrapper or any block level element of an web page
4) What is the alternate way to use padding without any additional adjustment to be made
5) What if we want to use a padding: 0 auto condition to the block level element of an HTML and CSS integrated web page? will it follow the same way as in case of margin: 0 auto condition
6) Proceeding to the next topic: Unit of measurements in CSS - tutorial for beginners

Hope you guys will like this tutorial. There is an anomaly in the tutorial while displaying padding with examples. Let's see whether you can spot the puzzle and solve it or not. If you are aware of it, let us know with the comment. Thanks in advance for watching the tutorial.

Thumbnail image courtesy:

We are available into these places:
======================================================
Our books are available here:
=============================================
Twit us anytime here:
=======================================
Our Google+ profile is here:
=============================================
Watch us at Facebook:
============================================
Our blogs are available at:
=========================================

If you guys have liked this tutorial then do not hesitate to hit the RED SUBSCRIBE button down below. Comment, Like and Share.