Skip to main content

WDS31 - Story of Two CSS Friends (Part 1)

In the last article, we learned about how to use borders in web pages including their styling with colors, styles and rounded corners.

Now in this article, we are going to see something that confuses most of the new web developers and need to be clear as soon as possible. We are going to study margins and padding in CSS. We have already studied a little bit in HTML articles, but let's study in detail and avoid any future confusion.
Let's begin...

There are two ways in CSS to create space around elements:
margins and padding
In most usages, they give the similar output.For example, if we add 10 pixels of margin or padding to the right side of the element, that element will generally move 10 pixels to left on the screen. But in reality, they both are doing this same thing in a different way. 
So let's see what actually happens behind the scenes...

CSS Margins

Basics
The margin property in CSS is used to create space around the elements outside of defined borders if any.
Actually, margin property is shortcut property for the following individual properties:
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
In fact, margin: 10px 20px 30px 40px is same as
margin-top:10px
margin-right:20px
margin-bottom:30px
margin-left:40px.
Just remember order is important while writing in the margin which is top, right, bottom and left.

The auto Value
We can set margin property to auto to horizontally center the element within the container it is in. In this case, let's say
Total width of container = 500px;
Total width of element = 200px;
Hence, remaining space = 500 - 200 = 300px
This remaining space will be split equally between the left and right margins.
Hence left margin = right margin = 150px

The inherit Value
If you set margin property to inherit then it will have same margin values as it's parent element.

The great phenomenon of Margin Collapse
Let's see the example:
We have two elements(say paragraphs). Set the margin-bottom of first to 60px and margin-top of the second paragraph to 30 px. Now according to our common sense, there should be space of 90px between two paragraphs. But due to Margin Collapse, the margin will be 60px only. Remember this does not happen for horizontal margins...

That's all for today. In the next part, we will study about padding in detail and will finally see when to use what.
Till then #keepCoding.
Labels:

Comments

Post a Comment

Popular posts from this blog

Python Project - 1 (Password Locker)

Hello reader, this is my first post on this blog. I created this blog for various purposes including First and most importantly improve my coding Help others to learn various concepts in programming  To complete my hobby of blogging So, I am starting various series simultaneously, hope I will able to continue them. In this " Python Project " series, I will create simple python projects and will give step by step procedure to do that. I think you should first try to complete code yourself, then if you get stuck anywhere, feel free to check steps, refer complete code or comment for more help. Let's begin... Idea and Need: You probably have accounts on many different websites. It is a bad habit to have the same password and it is difficult to remember all passwords. So it is a good idea to use "Password Manager Software". So why not create it yourself? So let's see what steps you should follow... Steps: We have to create a menu which has the...
Post a Comment
Read more

WDS8 - Use of Quotes and Comments

In the last article we learned following tags to enhance your HTML: <b> and <strong> tags <i> and <em> tags <small> <del> <mark> <ins> <sup> and <sub> tags Now let's move forward from styling and see some HTML elements so that we can write quotes in our documents comfortably. HTML <q> tag for Short Quotations This <q> tag defines a short quotation in HTML. This is mostly used for short inline quotations. Most of the browsers insert quotation marks(") before and after the content in quotation tags. HTML <blockquote> tag for Large Quotations This <blockquote> tag defines large quotations in HTML. Browsers usually indent the content inside <blockquote> tags. HTML <abbr> for Abbreviations HTML <abbr> tag defines an abbreviation. This tag requires one extra attribute called title . This attribute takes full form for that particular abbrev...
3 comments
Read more

WDS85 - Animate the CSS(Part 3)

In the last two articles, we learned about animations in CSS and various ways to customize them with the help of iterations and animation delays. Now in today's article, we are going to learn more about them so that to customize them even more. Let's begin... Reverse Directions and Alternate Cycles The animation-direction property in CSS decides whether we want to play animation forward, backward or in alternate cycles. Following values are possible: normal - This is the default. Animation plays as normal(forward). reverse - The animation plays in reverse direction that is backward. alternate - The animation first plays forward and then backward. alternate-reverse - The animation first plays backward and then forward. Speed Curve of Animation Just like we used various ways to customize transitions in CSS some articles before, same functions can be used to change the speed of the animation. The animation-timing-function property specifies the speed curve ...
1 comment
Read more