How to Install Operating System ??Complete Guide Installing The Operating System

How To Set Margin With CSS

If you hear the word margin, it is certainly not foreign to operate office software, where margins are used to set the distance between edges or elements or pages or text. Now in this tutorial, we will discuss how to adjust margins with CSS, in this tutorial we will discuss in full how to use margin properties along with other margin derivatives.

Before going forward, there are a number of articles that you might be looking for.

Read Too :

Following is the property-margin property which will be discussed in this tutorial:

  • margin short property to set all corners of an element in a declaration
  • margin-top to adjust the upper margin
  • margin-bottom to adjust the bottom margin
  • margin-left to adjust the left margin
  • margin-right to adjust the right margin

The above properties will be discussed along with the use of complete source code to make it easier to understand.

How To Set Margins With CSS

As discussed above, there are several properties that can be used to manage margins with CSS, one of which we will discuss first is the use of short properties that can set all corners of elements in a declaration.

margin: 10px 10px 10px 10px;

The syntax margin above is used to set all the edges of the elements, here is an illustration of each value in the property above.

How To Set Margin With CSS
How To Set Margin With CSS

It can be seen that from each edge of the element has a distance of 10 pixels, here is an example of complete source code adjusting margins with CSS.

<!DOCTYPE html>
    <title> Margin </title>
    <style type = "text/css">
        . container {
            border: 1px solid #000;
            width: 50%;
        .margin {
            margin: 10px 10px 10px 10px;
            border: 1px solid #000;
     <div class = "container">
          <div class = "margin"> Margin element </div>

Output results in the browser …

How To Set Margin With CSS
How To Set Margin With CSS

But from the above method can be shortened again to set all elements with the same value only need to declare with just one command.

margin: 10px;

With the syntax above all parts of the element have an edge distance of 10 pixels, the same as the code above but with the condition that all distances have the same value.

How to adjust margins only in certain parts?

To set margins with CSS that can only be used in certain parts, you can use the margin – [position] property, even though the margin above is possible. Here is the code.

margin-top: 10px; / *set the distance to 10pixel */

For the use of other properties not different, we can determine each property with the values ​​we want. For example:

margin-top: 10px;
margin-bottom: 20px;
margin-left: 15px;
margin-right: 25px;

The properties above can be used to determine the distance of one part of the HTML element, for units of distance can use units of measure other than pixels, for example like percent, and so on.

Before going forward, there are a number of articles that you might be looking for.

Read too :

User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *