Understanding about padding from CSS Box Model

I am writing this article on the things that I have learnt when practicing. Before understanding padding we need to understand that padding cannot be applied to all HTML elements. The padding can only be applied to Block-level HTML elements ex: <div>, <p> etc. It cannot be applied to Inline-level HTML elements <span> , anchor tag element <a href=""></a> etc. To put it in simple words, every Block-level HTML elements are first surrounded by an area or space, that area or space is called padding. See the image below Confusion part : You will be easily confused when you need to add padding to the elements which are inside the deep containers like level1, level2 Ex: see the <div> element with class='form-group' is nested inside another <div> with class 'form-wrap' and 'form-wrap' is nested inside the <div> element with ID='container' Padding can be understood better with border so to avoid the confus...