Borders, Padding and Margins on required sides

Tweet

Borders, Padding and Margins can also be applied only to the required sides of an element. This is possible by combining the top, right, bottom and left properties with the box model properties.

Borders on required sides

p {
    padding:1em;
    width: 300px;
    
    border-top-width: 5px;
    border-top-style: dashed;
    border-top-color: teal;
    
    border-right-width: 1em;
    border-right-style: groove;
    border-right-color: #069;
    
    border-bottom-width: 5px;
    border-bottom-style: dotted;
    border-bottom-color: orange;
    
    border-left-width: 9px;
    border-left-style: solid;
    border-left-color: green;
}

You can see from the above picture that the borders on each side of the content is unique, and it's because of the mixing of the position properties(top, right, bottom and left) with the border properties(width, style and color). This now helps to style the borders on each sides individually.

As the above code contains a bit lot of work, you can use border shorthand property combining with positioning properties.

border-top: 5px dashed teal;
border-right: 1em groove #069;
border-bottom: 5px dotted orange;
border-left: 9px solid green;

Padding on required sides

p {
    border: 5px solid teal;
    width: 300px;
    
    padding-top: 1em;
    padding-bottom: 25px;
    padding-left: 1.5em;
}

Similar to mixing of position properties to borders, padding can also be applied to the required sides. If any side is left out, then padding do not apply to that side.

Margins on required sides

p {
    border: 5px solid teal;
    width: 300px;
    
    margin-top: 30px;
    margin-right: 1.5em;
    margin-bottom: 25px;
    margin-left: 18px;
}

After borders and padding, now we have seen how to make margin space on only the required sides.

Shorthand Styling of borders, padding and margins

Instead of using top, right, bottom, left values on borders, margins and padding you can use the shorthand styling which reduces a much lot of code.

Applying four values

p {
    width: 300px;
    border-style: solid dashed double dotted;
}

The four values(top, bottom, left and right) can be presented now in a single shorthand property like the code above. The first(solid), second(dashed), third(double) and fourth(dotted) value gives the top, right, bottom and left values respectively in a clockwise order.

Applying three values

p {
    width: 300px;
    border-style: solid dashed double dotted;
    border-color: yellow #069 orange;
}

Here the first value(yellow) define the top border, the second value(#069) defines the right and left borders and the third value(orange) define the bottom border.

Applying two values

p {
    width: 300px;
    border-style: solid dashed double dotted;
    border-color: yellow #069 orange;
    border-width: 0.9em 0.3em;
}

In this above code the border-width property has two values, where the first value(0.9em) defines the top and bottom borders and the second value(0.3em) defines the right and left borders.

Similarly, just like borders you can also use this shorthand property to padding and margins, like below

p {
    width: 300px;
    border-style: solid dashed double dotted;
    border-color: yellow #069 orange;
    border-width: 0.9em 0.3em;
    padding: 50px 3em 1em;
    margin: 30px 20px;
}

Creating Padding and Margin in CSS

Tweet

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.

Understanding Box Model

Tweet

Any element like a text, image or video in HTML is actually made up of an imaginary box. HTML gives the developers to adjust the size of the box accordingly to the other box elements to fit into a webpage. This can be done by three selectors,

1. Border
2. Padding
3. Margin

1.Border

The border is the only selector, which can be made visible to the users eye with some style properties. The three aspects to do that are width, style and color. By default, the border is just an invisible line, but can actually made visible placed between padding and margin.

2.Padding

Padding spaces the content(text, image, video, etc...) from the border. This selector helps the border not to be congested with the content. From the above picture, you can see that padding is an imaginary space, and therefore the background color in the content is also spread over the padding space.

3.Margin

Margin is similar to padding, except that the space appears outside the border. This is useful in spacing the box from other boxes in a webpage. This is also an imaginary space, and so the color you see in the margin region is the background color applied to the body element.