October 26, 2012

Creating Padding and Margin in CSS


After understanding what is padding and margin, we need to know how to do and apply it to the elements in HTML. This is achieved using the padding and margin properties in CSS.

Creating Padding

To create a padding, you need to apply the padding property to the selector, of where the element is present. The values should be in numerical values or units or in percentage.


p.one {
  border: 3px solid #069;
  padding: 1em;
}

p.two {
  border: 3px solid #069;
  padding: 25px;
}

The default padding varies according to different browser.

Creating Margin

The margin property helps to space the content from the other contents inside a webpage and so it adds space outside the border. The margin CSS property helps to do this job. The values can be numerical or units or in percentages as like padding property.


p.one {
    float:left;
    border: 3px solid #069;
    padding: 25px;
    margin: 1.5em;
}

p.two {
    border: 3px solid #069;
    padding: 25px;
    margin: 1.5em;
}

In the above picture, the two paragraph contents are spaced 3em, with each paragraph's margin containing 1.5em space. Without the margin property the two paragraph contents will touch each others border.

No comments:

Post a Comment