HTML space setting method

HTML space setting methods include: 1. Inline style; 2. Internal style sheet; 3. External style sheet; 4. Use margin and padding attributes. Detailed introduction: 1. Inline style, use the style attribute directly in the HTML element to set the CSS style; 2. 2. Internal style sheet, use the "

HTML space setting is mainly achieved through CSS. There are many specific methods. The following are some common setting methods:

1. Inline style: Use the style attribute directly in the HTML element to set the CSS style. For example:

<div>我是一个 div</div>

2. Internal style sheet: Use the

        <div>我是一个 div</div>  

3. External style sheet: Write the CSS rules in a separate .css file, and then use the tag to reference this file in the HTML document. For example:

        <div>我是一个 div</div>  

In the styles.css file:

div {padding: 20px;}

Among the above three methods, the external style sheet method is the most recommended, because this can achieve the separation of style and content, making the website Maintenance and style modifications are more convenient. At the same time, external style sheets can also be shared by multiple pages, which can improve the performance of the website.

4. Use the margin and padding attributes: These two attributes can set the outer margin and inner margin of the element respectively. For example, margin: 10px; sets the element's outer margin to 10 pixels, and padding: 20px; sets the element's inner margin to 20 pixels. Both properties can accept four values ​​(top, right, bottom, left), two values ​​(top, bottom, left), or one value (all). For example:

div {margin: 10px; /* 设置外边距为10像素 */  padding: 20px; /* 设置内边距为20像素 */  }

or:

div {margin: 10px 15px; /* 设置上下外边距为10像素，左右外边距为15像素 */  padding: 20px 25px; /* 设置上下内边距为20像素，左右内边距为25像素 */  }

or:

div {margin: 10px 15px 20px 25px; /* 设置上外边距为10像素，右外边距为15像素，下外边距为20像素，左外边距为25像素 */  padding: 20px 25px; /* 设置上下内边距为20像素，左右内边距为25像素 */  }

Note that the values ​​of margin and padding can be in units such as pixels (px), percentage (%), em, etc. It can also be a relative unit (such as em). In addition, among the four values ​​of margin, if the first two values ​​​​are positive numbers, the first two values ​​​​represent the top and bottom margins; if the last two values ​​​​are positive numbers, the last two values ​​​​represent the left and right margins. Similarly, among the four values ​​​​of padding, if the first two values ​​​​are positive numbers, the first two values ​​​​represent the top and bottom padding; if the last two values ​​​​are positive numbers, the last two values ​​​​represent the left and right padding. .

The above is the detailed content of HTML space setting method. For more information, please follow other related articles on the PHP Chinese website!