CSS introductory tutorial: margin attribute

The simplest way to set margins is to use the margin attribute. Margin is used to set the distance between object labels. For example, if there are two DIV boxes arranged one above the other, we can use the margin style to achieve the distance between the two boxes above and below. The margin property accepts any length unit, which can be pixels, inches, millimeters, or ems. margin can be set to auto. A more common approach is to set a length value for the margins. The following statement sets a 1/4-inch-wide margin on each side of the h1 element: h1 {margin : 0.25in;}. The following defines different margins for the four sides of the h1 element, and the length units used. Is the pixel (px):

h1 {margin : 10px 0px 15px 5px;}

is the same as the setting of the padding. The order of these values ​​​​is starting from the top margin (top) and rotating clockwise around the element. In addition, you can also Margin sets a percentage value: p {margin : 10%;}, so that the margin of the p element is 10% of the width of its parent element. The default value for margin is 0, so if you don't declare a value for margin, no margins will appear. However, in practice, readers already provide predetermined styles for many elements, and margins are no exception. Use margin to center the design. The basic usage is: margin:0 auto; to center the object, but one condition is required, that is, the object's superior must set the text-align:center content centering attribute style. Some browsers do not set the text-align:center content centering style for the body tag. If the underlying containing object is set with margin: 0 auto, the layout will be centered. However, in order to be compatible with major browsers, it is recommended to set a text-align for the body: center attribute style.

CSS One-sided margin property

You can use the single-sided margin property to set a value for the margin on one side of an element. Suppose you want to set the left margin of the p element to 20px, you can use the following method:

p {margin-left: 20px;}

You can use any of the following attributes to only set the margin on the corresponding element without directly affecting it. All other margins: margin-top, margin-right, margin-bottom, margin-left
You can use multiple such unilateral attributes in a rule, for example:

h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}

You also It can be written as: p {margin: 20px 30px 30px 20px;}, the abbreviated logic is still: top, right, bottom, left.

The above is the detailed content of CSS introductory tutorial: margin attribute. For more information, please follow other related articles on the PHP Chinese website!