Knowledge sharing HTML and CSS

Time:2021-5-1

HTML and CSS

primary coverage

HTML

​ HTML(HyperText Markup Language)It’s hypertext markuplanguage。” Hypertext means that the page can contain non text elements, such as pictures, links, music, etc.

It is a kind of language to create web page files, and displays links such as image, sound, picture and text through tag. This markup language is the main language of web pages on the Internet.

HTML web page files can be written with Notepad, WordPad, hbuilder, sublime and other editing tools, and saved with. HTM or. HTML as the file suffix. Open and display the HTML web page file with a browser. If there is no problem in the test, you can put it on the server to publish information.

Basic grammar

label

HTML tags are instruction tags enclosed by “<” and “>”, which are used to send tag instructions to the browser.

It is mainly divided into: single tag instruction and double tag instruction (composed of “< start tag >” + content + “< / end tag >”.

HTML language uses the method of mark pair to write files, which is simple and convenient. It usually uses “< tag name > content < / tag name >” to indicate the beginning and end of the tag, so in HTML documents, such tag pairs must be used in pairs.

In order to facilitate understanding, HTML markup language is roughly divided into: basic markup, format markup, text markup, image markup, table markup, link markup, form markup and frame markup.

Single label

Single label without setting property value.

For example:

<br/>、<hr/>
Single label properties

Single label (also called empty element) to set the attribute value. For example:

<hr width="800" />
Double label

Double label, no property value is set. For example:

<title>…</title>
Double label properties

Double label, set property value. For example:

<body bgcolor="red">…</body>
<font size="7">…</font>

Overall structure

HTML content is composed of a pair of tags, tags can not be confused, the page has the overall structure and rules of the page, tags and tags need to be nested correctly.

Generally, an HTML web page file consists of three parts: tag header area < head >… < / head >, content area < body >… < / body > and web page area < HTML >< https://segmentfault.com/HTML >。

<html>
<head></head>
<body></body>
</html>

<html>
    <head>
        <meta charset="UTF-8">
        Basic structure of < title > HTML document
        <script></script>
        <link rel="stylesheet" type="text/css" href=""/>
    </head>
    <body>
    </body>
</html>
html

The < HTML > flag is used at the front of the HTML document to mark the beginning of the HTML document. The < / HTML > flag is placed at the end of the HTML document to mark the end of the HTML document. The two flags must be used together.

head

< head > and < / head > form the beginning of an HTML document< The content between the head > and < / head > logo pairs will not be displayed in the browser box, and the two logos must be used together.

Tags such as < title > < / Title >, < script > < / script >, < meta >, < link > can be used between these flag pairs.

< meta >: used to provide information about documents. The starting attribute is: charset = “utf8”. It means to tell the browser what encoding the page adopts. Generally speaking, we use utf8. Of course, the file is saved with utf8, and the browser can display Chinese correctly by setting utf8.

< link >: used to import CSS files

< script >: used to import JS files or write JS code.

title

< title > defines the title of the document. The browser uses the title in a special way, and usually places it on the title bar or status bar of the browser window. Similarly, when a document is added to a user’s link list or favorite or bookmark list, the title will become the default name of the document link.

Note: the < title > tag is located in the < head > tag, which is the only thing required to be included in the < head > tag.

body

In general, most of the content displayed on the browser is placed in the body. But it does not rule out that other tags can not use body, such as frameset tags.

< body > and < / body > are the main parts of an HTML document. Between these flag pairs, you can include < div > < / div >, and、<p>…</p>、<h1>…</h1>、


And so on. The text and image defined by them will be displayed in the browser box.

Common attributes

attribute

value

describe

bgcolor

XXXXXX: hexadecimal number, 00 FF
colorname:Red、Green…
rgb(x,x,x):red、green、blue,x:0-255

Specify the background color of the document and replace it with a style later

text

rgb(x,x,x) #xxxxxx colorname

Specifies the color of all text in a document, which can be replaced by a style later

DOCTYPE

Document type hypertext markup language, the type of hypertext markup language in a document, can tell the browser how to parse the document.

Due to the different standards used in different scenarios or versions, the browser needs to parse the HTML text content according to different standards. This needs to tell the browser which way my current HTML page is written. Without this statement, it will be the beginning of your HTML nightmare.

Common labels

HTML page is composed of tags. Different tag browsers render different styles and contents. We need to remember common tags. It can be roughly divided into the following categories: title, horizontal line, paragraph, line feed, picture, table, hyperlink, list, form, drop-down list, div and span.

Title and horizontal line

title

The < H1 > – < H6 > tag can define the title, and the title decreases in turn. Since the H element has exact semantics, please carefully select the appropriate tag level to construct the document structure. Do not use the title label to change the font size in the same line. Instead, we should use cascading style sheet definitions to achieve beautiful display.

< h999 > such tags do not produce errors, but do not have the effect of title.

H1 tags can be obtained for search engines, which is convenient for pages to be retrieved when they are searched, but a page should have only one H1 tag, otherwise it may enter the search engine’s blacklist.

<h1></h1>
level


Tags create a horizontal rule in the HTML page to visually divide the document into parts. In HTML,


The tag has no end tag.

<hr />

Common attributes

attribute

value

describe

align

CenterLeftright

Specifies the alignment of the HR element, which can be replaced by a style later

size

pixels

After specifying the height (thickness) of the HR element, it can be replaced by a style

width

Pixels%

After specifying the width of the HR element, you can replace it with a style

Paragraphs and line breaks

paragraph

The < p > label defines the paragraph. The P element automatically creates some white space before and after it. The browser will automatically add these spaces, or you can specify them in the style sheet.

Understanding: there will be a big gap between the paragraphs in the Chinese textbook.

<p></p>

Common attributes

attribute

value

describe

align

left、right、center、justify

Specifies the alignment of the text in a paragraph, which can be replaced by a style later

Line feed

Br the label is a newline symbol,
The tag is empty (meaning it does not have an end tag, so this is an error:
)。

Note:
Tags simply start a new line, and when browsers encounter < p > tags, they usually insert some vertical spacing between adjacent paragraphs. Please use
To enter blank lines instead of splitting paragraphs.

<br/>

list

Unordered list
It consists of < UL > < / UL > and < li > < / Li > tags.
<ul>
    <li></li>
    <li></li>
    ......
</ul>

<ul>
    <li>Study hard</li>
    <li>Make progress every day</li>
</ul>

Common attributes

attribute

value

describe

type

disc
circle
square

Specifies the bullet type of the list. You can use styles instead.
Disc: solid circle (default)
Circle: hollow circle
Square: Square

Ordered list

It consists of < ol > < / OL > and < li > < / Li > tags.

<ol>
    <li></li>
    <li></li>
    ......
</ol>

<ol>
    <li>Study hard</li>
    <li>Make progress every day</li>
</ol>

Common attributes

attribute

value

describe

type

1
a
A
i
I

Specifies the type of tag to use in the list.
1: Number in numeric form (default)
a: Use lowercase letters for serial numbers
A: Use capital letters for serial numbers
i: Use lowercase Roman numerals for serial numbers
I (capital I): denote the serial number with capital Roman numerals

Div and span

div

< div > is a block level element, usually used with CSS for layout.

The < div > tag can divide the document into independent and different parts. It can be used as a strict organization tool and is not associated with it in any format.

< div > is a block level element. This means that its contents automatically start a new line. In fact, line feed is the only inherent format representation of < div >. Additional styles can be applied through the class or ID of < div >.

<div>content</div>

Common attributes

attribute

value

describe

align

left、right、center

Specifies the alignment of the contents in the div element, which can be replaced by styles later

span

< span > tags are used to combine elements within a line in a document, span has no fixed format representation. When you apply styles to it, it changes visually.

<span>content</span>

Format label

font

Specify the font, font size and font color of the text

pre

Defines pre formatted text. Text enclosed in a pre element usually retains spaces and line breaks. The text is also rendered in the same width font

Text label
**<b> * * (bold text), * * < I > * * (italicized text), * * < U > * * (underlined text), *

< del >(underlined text), “(subscript text)(superscript text)

A label

Tags define hyperlinks for linking from one page to another.

The most important attribute of the element is the “a” attribute, which indicates the target location of the link. At the same time, without the “a” attribute, the content in the tag is not different from that in the normal text, so the function of hyperlink is lost.

If you want to jump to the current page, then the value of #. The linked page is usually displayed in the current browser window unless you specify another target (target attribute).

<a href=" http://www.baidu.com "> Baidu</a>

Common attributes

attribute

value

describe

href

URL

The location of the connection to jump to may be another page or the current page.

target

blank
_parent
_self

top
Framename is the name value of the a tag of the anchor

Specify where to open the linked document.
_ Blank: open a new page to display the page;
_ Self: the current page display jumps to the page, the default value.
_ Top: used for pages with frameset layout. You want to cover the whole page display.
Framename: here, framename is different from the value above. The specific name of the frame shall prevail. This value indicates that the page to be connected will be displayed in the frame with the corresponding name after jumping.

Realization of anchor point

Using the name attribute of a tag:

<a name="top"></a>

The ID attributes of general tags are div id =, a id =, etc

<div id="top"></div>、<a id="top"></a>

Anchor positioning

Back to head</a>

picture

The IMG element embeds an image into the web page.

Note: technically, the < img > tag does not insert an image in the web page, but links the image from the web page< IMG > tag creates the space occupied by the referenced image.

<img >

Required attributes

attribute

value

describe

alt

text

It specifies the alternative text of the image. Generally, the space occupying text cannot be displayed normally in the image.

src

URL

Specifies the URL to display the image.

Common attributes

attribute

value

describe

align

top、bottom、middle、left、right

Specifies how to arrange images based on the surrounding text

border

pixels

Defines the border around the image

height

pixels、%

Defines the height of the image.

width

pixels、%

Defines the width of the image.

title

text

The text displayed when the mouse is over the picture

form

The < Table > < / Table > tag defines the HTML table.

The < tr > < / TR > tag defines the rows of the table. The TR element contains one or more th or TD elements

< td > < / td > tags define standard cells in HTML tables.

< th > < / th > defines the header cells in a table. The text inside the th element is usually rendered as centered bold text, while the text inside the TD element is usually left aligned plain text.

A simple HTML table consists of a table element and one or more TR, th, or TD elements.

Understanding: table is equivalent to the outer frame of a table, TR is a row, TD is a cell, th is a cell with a title, and the content in th has the effect of thickening at the same time.

Common attributes

attribute

value

describe

align

right、center、left

Table alignment

border

px

Specifies the width of the table border

width

% 、px

Specify the width of the form

TR common attributes

attribute

value

describe

align

right、left、center

Defines the content alignment of table rows.

bgcolor

rgb(x,x,x)、#xxxxxx、colorname

Specifies the background color of table rows, which can be replaced by styles later

valign

top、middle、bottom

Specifies the vertical alignment of the contents in a table row, which can be replaced by a style later

ColSpan and rowspan of < td > specify the number of columns and rows that cells span, respectively

form

form

The < form > tag is used to create HTML forms for user input.

Forms can contain input elements, such as text fields, check boxes, radio boxes, submit buttons, and so on. You can also include elements such as textarea.

Forms are used to transfer data to the server. The form element is a block level element, and there will be line breaks before and after it.

Common attributes

attribute

value

describe

action

URL

Specifies where to send form data when a form is submitted

method

get、post

Specifies the HTTP method used to send form data

name

Form_name

Specify the name of the form

target

blank _self parent _top framename

Specify where to open the action URL

Method: form submission method: get, post

Get: default, active access, data on the URL, limited data capacity, poor security, with cache

Post: the data is placed in the request entity, the amount of data is theoretically unlimited, relatively safe, and there is no cache

input

The < input > tag is used to collect user information.

Depending on the value of the type attribute, input fields come in many forms. Input fields can be text fields, check boxes, radio buttons, buttons, and so on.

Common attributes

attribute

value

describe

alt

text

Defines alternative text for image input.

checked

checked

Specifies that this input element should be selected the first time it is loaded.

disabled

disabled

Disable the input element when it is loaded.

readonly

readonly

Specifies that the input field is read-only.

maxlength

number

Specifies the maximum length of characters in the input field.

value

value

Specifies the value of the input element.

type

button
checkbox
file
hidden
image
password
radio
reset
submit
text

Specifies the type of the input element. Button check box file hidden field image button password radio box reset button submit button text

If the file is uploaded, the request method is post, and the form adds an attribute:enctype=”multipart/form-data”

be careful:

1. Attributes without name attribute cannot be submitted to the background!!!!

2. Radio radio buttons are grouped with the same name.

3. The check box buttons are grouped with the same name.

textarea

This label defines a multiline text input control. The text area can hold an unlimited number of texts, and the size of the textarea can be specified by the cols and rows attributes. Cols specifies the visible width of the text area. Rows specifies the number of visible lines in the text area.

<textarea>content</textarea>
label

The < label > tag defines a label (tag) for the input element.

The label element does not have any special effects.

The for attribute of the label should be the same as the ID attribute of the related element. At this time, clicking the label will automatically focus the element

< label for = "user name" > User Name: < / label >
<input type="text" id="username" name="username"/>
button
< button > button

Common attributes

attribute

value

describe

disabled

disabled

Disable the button.

type

button、submit、reset

Specify the type of button.

value

text

Specifies the initial value of the button.

name

button_name

Specifies the name of the button.

select

< Select > is used to define the drop-down list

<select name="color" >
    < option value = "red" > Red < / option >
    < option value = "green" > Green < / option >
    < option value = "blue" > Blue < / option >
</select>

Select common attributes

attribute

value

describe

disabled

disabled

Disable the drop-down box.

multiple

multiple

Multiple options are specified.

name

name

Specifies the name of the drop-down list.

size

number

Specifies the number of options visible in the drop-down list.

Common properties of option

attribute

value

describe

disabled

disabled

Disable the drop-down box.

selected

selected

Specifies that the option (when first displayed in the list) is selected.

value

text

Defines the value of the option sent to the server.

Common character entities

In HTML, some characters are reserved.

The less than sign (<) and the greater than sign (>) cannot be used in HTML because browsers mistook them for tags.

If we want to display reserved characters correctly, we must use character entities in HTML source code.

Entity names are case sensitive!

Knowledge sharing HTML and CSS

Classification of labels

There are three different types of tag elements in HTML: block element, intra line element and intra line block element.

Block level elements

All elements start with a new line, and the following elements start with another line; The height, width, row height, top and bottom margin of elements can be set; The width of an element is 100% of its parent container (the same as the width of the parent element) without setting it, unless a width is set.

In line elements

And other elements are on the same line; The height, width and top and bottom margins of elements cannot be set; The width of an element is the width of the text or image it contains and cannot be changed.

In line block element

And other elements are on the same line; The height, width, row height, and top and bottom margins of elements can be set.

CSS

CSS (English full name: cascading style sheets) is a computer language used to represent HTML (an application of Standard General Markup Language) or XML (a subset of Standard General Markup Language) and other file styles.

At present, the latest version of CSS is CSS3, which is a style design language that can truly achieve the separation of web page performance and content. Compared with the performance of traditional HTML, CSS can accurately control the position and layout of objects in the web page at pixel level, support almost all font size styles, have the ability to edit web page objects and model styles, and be able to conduct preliminary interaction design. It is currently the best performance design language based on text display. CSS can simplify or optimize the writing according to the understanding ability of different users. It is easy to read for all kinds of people.

CSS is used to beautify the web page. Without a web page, CSS is useless, so CSS needs to rely on HTML to display its functions.

Knowledge sharing HTML and CSS

Basic use of CSS

CSS basic syntax

CSS styles consist of selectors and one or more style declarations separated by semicolons. Each declared style contains a CSS property and a property value.Knowledge sharing HTML and CSS

Selector name{
    Attribute: attribute value;
    ......
}
div {
    background-color : red;
}

be careful:

  1. CSS declaration should be semicolon; End with{}All in all
  2. It is suggested to write one attribute per line
  3. If the value is several words, quotation marks should be added to the value, such as font family: “agency FB”;

notes

Multiline comment:

/*The content here is annotation*/

The use of CSS

1. In line

In line style defines the style in the style attribute of a specific HTML element. CSS written in line style has high coupling and is only applicable to the current element. It is commonly used when setting the style of an element.

<p style=" color:red; font- size:50px; "> This is a piece of text</p>

Use the declaration style of the style attribute in the current element.

Style is an in line style attribute;

Color is a color attribute; Red is the color attribute value;

Font size is the font size attribute; 50px is the font size attribute value

2. Embedded

Embedded system creates a section of code area belonging to CSS in HTML page content. The usual way is to nest < style > tags in < head > tags, and call specified elements and set relevant CSS in < style > tags by selector.

<style type="text/css">p {color: blue;font-size: 40px;}</style>

3. Import external style file

In the actual development, it is often used to introduce the external style file, which can make the HTML page clearer and achieve better reuse effect.

style.css

p {color: green;font-size: 30px;}

test.html

<link rel="stylesheet" type="text/css" href="style.css">

​ rel:rel Property specifies the relationship between the current document and the linked document.

Stylesheet: the external style sheet of the document.

Many times, a large number of HTML pages use the same CSS. Then you can save these CSS styles in a separate. CSS file, and then introduce them through the < link > element.

Note: when there are multiple styles, remember the premise rule, the more accurate the priority.

CSS selector

In CSS, selectors are a pattern for selecting elements that need to be styled.

There are many CSS selectors, you can master the common ones;

Basic selector

universal selector

Select all < font color = “red” > * < / font >

* {
    ......
}
* {
    color: orange;
}
element selector

Select the specified label

Element name{
    ......
}
p {
    color: red;
    font-size: 20px;
}
ID Selector

Select the element that has set the specified ID attribute value

#ID property value{
    ......
}
#p1 {
    font-weight: bold;
}
Class selector

Select the element with the specified class attribute value. < font color = “red” >. < / font >

. class property value{
    ......
}
.hidden {
    display: none;
}
Group selector

When the style attributes of several elements are the same, a declaration can be called together, and the elements are separated by commas

Selector 1, selector 2{
    ......
}
h2 , #pre1 {
    color: orange;
    font-style: italic;
}

The priority of CSS styles is determined by the accuracy / weight of the selector. The common weights are as follows: the higher the weight, the higher the priority

Element selector: 1

Class selector: 10

ID selector: 100

Inline style: 1000

Combination selector

CSS composite selectors illustrate the direct relationship between the two selectors. CSS combination selectors include a variety of simple selectors.

There are four combinations in CSS: descendant selector (separated by space), child element selector (separated by greater than sign), adjacent sibling selector (separated by plus sign), ordinary sibling selector (separated by wavy line).

Descendant selector (derived selector)

Used to select the next generation elements under the specified label elements, separated by spaces

Selector 1 selector 2{
    ......
}
.food  li {
    border: 1px solid red;
}
<h1>Food</h1>
<ul class="food">
    <li>Fruit
        <ul>
            <li>Banana</li>
            <li>Apple</li>
            <li>Pear</li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Chinese Cabbage</li>
            <li>Rape</li>
            <li>Cabbage</li>
        </ul>
    </li>
</ul>
Child Selector

Used to select all first generation child elements of a specified label element, separated by a greater than sign

Selector 1 + selector 2{
    ......
}
#d + div {
    border: 1px solid red;
}
The HTML code is the same as above
Adjacent Sibling Selectors

You can select an element immediately after another element, and both have the same parent element. Separated by a plus sign

Selector 1 + selector 2{
    ......
}
#d + div {
    border: 1px solid red;
}
<div id="d">
    Adjacent brother selector 1
    <ul>
        <li>Happy Mahua</li>
        <li>Jia Ling</li>
        <li>Song Xiaobao</li>
    </ul>
</div>
<div>
    Adjacent brother selector 2
</div>
Ordinary brother selector

Select all elements immediately after the other element, and both have the same parent, separated by wavy lines

Selector 1 ~ selector 2{
    ......
}
li ~ li {
    background-color : yellow;
}
<div>
    Ordinary brother selector 1
    <ul>
        <li>Happy Mahua</li>
        <li>Jia Ling</li>
        <li>Song Xiaobao</li>
        <li>Shen Teng</li>
        <li>Wang Ning</li>
    </ul>
</div>

CSS common property settings

background

CSS background properties are used to define the background effect of HTML elements

background-color

Sets the background color of the element

body {
    background-color:#ff0000;
}
background-image

Set the background image of the element. By default, the background image is tiled and displayed repeatedly to cover the whole element entity.

body {
    background-image:url('paper.gif');
}
background-repeat

Set whether and how to repeat the background image

body {
    background-image: url(img/logo.jpg);    
    background-repeat: no-repeat;
}

Knowledge sharing HTML and CSS

text

color
body {
    color:blue;
} 
h1 {
    color:#00ff00;
} 
h2 {
    color:rgb(255,0,0);
}
text-align

Set text alignment, center, left, right

body {
    text-align:center;
}   
h1 {
    text-align:right;
} 
h2 {
    text-align:right;
}
text-decoration

Specifies the modifiers to be added to the text. The attribute values are none, underline, overline, and line through

1)underline

Underline text, the same as the U element of HTML.

2)overline

Add an overline to the text.

3)line-through

Add a middle dash to the text, the same as the s and strike elements in HTML.

4)none

Close all decorations originally applied to the element.

h3 {
    text-decoration:underline;
}
text-indent

Set the indent of the first line of text

p.ident2 {
    text-indent: 2em;
}

EM is a relative value. For example, if the text size of a page is 17px, 2em is 17px * 2

typeface

font-family

Text font, which sets the font of the text.

The font family attribute should set several font names as a “backup” mechanism. If the browser does not support the first font, it will try the next one, so try to put the most common font in the front as a backup.

be careful:

1) only when the font name contains spaces or symbols such as #, $(such as New York), you need to put quotation marks in the font family declaration:

body {
    font-family: "arial black";
}

2) multiple font series are indicated by a comma

/*Front font*/
p{
    Font family: Microsoft YaHei, bold, "agency FB";
}
font-size

Text size

body {
    font-size: 50px;  /* Font size 50px*/
}
#span1 {
    font-size: 25px;  /* Font size 25px*/
}
font-style

Font style, which is most commonly used to specify italicized text. Attribute values: normal, Italian, oblique

1) normal: the text is displayed normally;

2) italics: the text is displayed in italics;

3) oblique: the text is tilted, oblique is to force the text to be tilted.

Note: generally, fonts have many attributes, such as bold, italics, underscores, and strikeouts. However, not all fonts have these attributes. Some uncommon fonts may only have normal fonts. If you use the italics attribute, it has no effect, so you need the oblique attribute to force the skew.

font-weight

Bold font, which sets the thickness of the text.

Bold: text can be set to bold.

100 ~ 900: 9 levels of bold are specified for the font. If these bold levels are built into a font, the numbers are mapped directly to the predefined levels.

100 corresponds to the smallest font deformation;

900 corresponds to the coarsest font deformation;

400 is equivalent to normal;

700 is equivalent to bold.

Alignment

text-align

Specifies the horizontal alignment of the text in the element. The attribute values are as follows:Knowledge sharing HTML and CSS

be careful:

The value justify aligns both ends of the text. In end aligned text, the left and right ends of the text line are placed on the inner boundary of the parent element. Then, adjust the spacing between words and letters so that the lines are exactly the same length. Does not take effect on the last line.

Display property

The display property specifies the type of box the element should generate. This property is used to define the type of display box generated by the element when the layout is created.Knowledge sharing HTML and CSS

float

The attribute values of float are none, left and right.

1. Only horizontal floating, no vertical floating.

2. The display attribute of the element will be changed to block.

3. The next element of the floating element will surround the floating element (the typical use is the text around the picture)

4. The previous element of the floating element will not be affected in any way (if you want to display two block elements side by side, you must apply float to both block elements).

Box model

Border, padding and margin constitute the box model.Knowledge sharing HTML and CSS

border

Set all border properties.

1) the width, style and color of the border can be set at the same time

table, th, td { 
    border: 1px solid black; 
}
table { 
    width:100%; height:50px; 
}

2) set border width, border style and border color separately

table,td {
    border-width: 1px;
    border-style: dotted;
    border-color: green;
}

3) properties of border style

Knowledge sharing HTML and CSS

​ 4)border-collapse

Sets whether the table border is collapsed to a single border.

Property values: separate (default, cell border independent), collapse (cell border merge)

table { 
    border-collapse : collapse; 
}
padding

Sets the width of all inner margins of an element, or the width of the inner margins on each edge.

If you control the inner margin of the text to the border in the content of the table, use the fill attributes of TD and th elements

td { 
    padding:15px;
}

Set the inner margin of each side separately: padding top, padding left, padding bottom, padding right

By default, it is set in the order of top right bottom left < / font >

td .test1 {
    padding: 1.5cm
}       
td .test2 {
    padding: 0.5cm 2.5cm
}
<table border="1">
    <tr>
        <td class="test1">
            Each edge of the table cell has an equal inner margin.
        </td>
    </tr>
</table>
<br />
<table border="1">
    <tr>
        <td class="test2">
        The top and bottom inner margins of this table cell are 0.5cm, and the left and right inner margins are 2.5cm.
        </td>
    </tr>
</table>

Note: when setting the inner margin of an element through padding attribute, the element will be deformed. If you don’t want to affect the format effect, you can use the margin attribute to set the outer margin of the element.

margin

Set the width of all outer margins of an element, or set the width of outer margins on each edge.

p.margin {
    margin: 2px 4px 3px 4px;
} 

Set the outer margin of each edge separately: margin top, margin left, margin bottom, margin right

p.margin{
    margin-top:100px; 
    margin-bottom:100px;
    margin-right:50px; 
    margin-left:50px; 
} 
*{
    margin: auto auto;
} 
*{
    margin: 100px auto;
}

explain:

Auto: automatic, can be understood as the middle of the meaning. The browser automatically calculates the outer margin.

Margin: Auto Auto: the first auto represents the automatic calculation of the upper and lower outer margins, and the second auto represents the automatic calculation of the left and right outer margins.