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 confusion in padding, apply border for the element which you are trying to add padding. This will give clear picture that how much amount of padding you need to add to improve the design.

Comments

Post a Comment

Popular posts from this blog

Understanding Collection and Object Initializer

Image
  collection - we use it when we want to group objects of different types into one bucket. Remember that each item in a collection is an object. Example ArrayList adds all items in the form of objects so we were taking out values from the ArrayList instance then we must type from object type to its corresponding type   Here item is of object type, and we are type casting it to its corresponding type. collection Initializer - The group of object initializers are nothing but collection Initializer       Object Initialzier - It is used to initialize the data members or properties of a class.To avoid creating multiple constructor of a class, we go for Object Initialzier. Object   initializers creates parameterless constructor internally. The curly braces opening and closing is called Object   initializers block.  
Read more

How to execute Javascript in VS code

Image
S1 : install node software s2 : install VS code software s3 : Open VS code editor. Open the extensions windows. Install two software   JavaScript (ES6) snippets Code Runner - By Jun Han s4 : Open new terminal window and type "npm install prompt-sync" --->This is used to prompt user input s5 : Type the JavaScript code as shown in the below screenshot. s6 : There is Run button on the right side of the window. Click on it to run the program. s7:  Console will ask for input from the user, if it is not allowing to edit then do the following open settings and type code runner and then put a check mark on that option. s8: Re-run the program                
Read more