Margins of a web page

Leave a Comment / CSS / By

Through style sheets CSS we can modify the margins of a web page. This will cause our content to be positioned in one place or another on the page. We can paste it to the top edge, separate it from the left,… Everything we need to give style to the web page.

Basic concepts about web page margins

If we want to modify the margins of a web page we must use four properties CSS:

The values ​​that these properties can receive can be established by an absolute value of length, either in pixels, em, rem,… or in percentages. Following the following structure:

margin-top : <margin-width> | inherit

These properties CSS we can assign them to any element HTML. Although, in our case, we will assign it to the body of the page. That is, to the element body
. In this way, the code CSS would look like this:

body{
  margin-left: 0px;
  margin-right: 10px;
  margin-top: 0px;
  margin-bottom: 10px;
}

Margin attribute to manage the margins of a web page

In the event that we want to assign the same value to all margins, we can directly use the margin attribute, assigning it a value. At this point the code, giving value to the property
margin
 would look like this:

body{
 margin: 10px;
};

This summary form can also be applied by defining the property
margin
 with 2 values; this way the first one would refer to
margin-top
 and
margin-bottom
, and the second value would refer to
margin-left
 and
margin-right
.

In this case we would have the following definition of the property in CSS:

body{
 margin: 0px 10px;
};

Another option is that there are 3 values. Where the first one would be for
margin-top
, the second for
margin-left
 and
margin-right
, and the third for
margin-bottom
.

body{
 margin: 0px 10px;
};

Or, finally, give the 4 values ​​directly in the property
margin
:

body{
 margin: 2px 5px 8px 10px;
};

Which would be assigned clockwise, starting with
margin-top
. So they would be
margin-top
,
margin-left
 ,
margin-bottom
 and
margin-right
.

I hope that, from now on, you can easily set the margins of your web page using CSS code.

Leave a Comment