How to set div margins in html

Method: 1. Use the margin related attributes to set the outer margin for the div (the distance around the periphery of the div box); 2. Use the padding related attributes to set the inner margin for the div (the content loaded in the div box to the edge of the box) (distance between borders)).

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS margins (margin)

The box’s margins are divided into four directions: top, right, bottom, and left.

Outside The setting of margin is used to control the distance around the periphery of the box, and does not belong to the scope of the box itself.

The main purpose of the margin is to control the position of the box, so negative values ​​can appear

CSS Margin Attribute

Attribute	Description
margin	Abbreviation property. Set all margin properties in one statement.
margin-bottom	Set the bottom margin of the element.
margin-left	Set the left margin of the element.
margin-right	Set the right margin of the element.
margin-top	Set the top margin of the element.

【Recommended tutorial: CSS video tutorial】

css padding

• The padding of the box is divided into four directions: top, right, bottom and left

• The setting of the padding is used to control the inner margin of the box The distance between the loaded content and the edge of the box (border).

• The padding of the box occupies the space inside the box, the minimum is 0, and negative values ​​are not allowed.

CSS padding property

##PropertyDescriptionpaddingUse shorthand attributes to set all padding properties in one declarationpadding-bottomSet elements The bottom paddingpadding-left Sets the left padding of the elementpadding-rightSet the right padding of the elementpadding-topSet the top padding of the elementMore For programming related knowledge, please visit:

programming video! !

The above is the detailed content of How to set div margins in html. For more information, please follow other related articles on the PHP Chinese website!