Differences, usage, and contact between inline elements and block elements in HTML

Yesterday, using ASP. BulletedList to make a navigation bar, finally the control form the HTML code is the UL list and a hyperlink, the code is as follows:

<ul id="BulletedList1"style="width:300px;"> <li><a href="javascript:__dopostback (& #39; bulletedlist1& #39;,& #39;0& #39;)"> Course Update </a></li><li><a href="javascript:__dopostback (& #39; bulletedlist1& #39;,& #39;1& #39;)"> Special Lectures </a></li><li><a href="javascript:__dopostback (& #39; bulletedlist1& #39;,& #39;2& #39;)"> Information Download </a></li>

The spacing he showed on the page was too crowded, so I wanted to use CSS to control the margins of the hyperlinks, and the padding. Here is the code for my CSS:

   #div_menu a{            text-decoration:none;            Margin-top:10px;            padding:5px;        }        #div_menu a:hover{            color:red;        }

I was obviously using CSS to control it, but I didn't have any effect on the page after I debugged it, what it used to be, and what it is still like. And then on the Internet to check some information, the original a tag is an inline element, high, high, and the internal margin is immutable. They determine the size of an element based on the contents of the element. So in the above code the

Add a CSS control statement display:block #div_menu A; Change the element to a block element.

The modified CSS code is as follows:

?

1 2 3 4 5 6 7 8 9

#div_menu a{           display:block;           text-decoration :none;           margin-top:10px;           padding:5px;       }       #div_menu a:hover{           color:Red;       }

This is the control of the margin style that implements the a hyperlink.

The following summarizes the usage, differences, and linkages between fast and inline elements in HTML

Inline and block-level elements are all categories in HTML, and the main difference between block and inline elements is that the block element starts from the new line. Inline elements are generally displayed on one line. However, you can change the inline element to a block element through the display property of the CSS, or you can change the block element to an inline element (Display:in-line) (Display:block).

　　 Inline features of the element

　　1. And other elements are displayed on one line;

2. Padding and margins, height, width are immutable, his width is based on his display text and the width of the image

3. You can use CSS to turn it into a block element and then apply it with CSS other styles.

features of block elements:

1. Always display on a new line;

2. Height, line height, width, inner margin, margin, etc. are controllable;

3. His height defaults to 0, which is determined by the content within the element, and the width is the width of the parent element, but it can be controlled by CSS, and the specified width and height can be displayed by using the float and positioning to show him and the other block elements on one line;

　　Common inline (inline) elements

* A-anchor point
* abbr-abbreviation
* acronym-first word
span>* B-Bold (not recommended)
* Bdo-bidi override
* big-Large font
* BR-line break
Span>* cite-reference
* Code-computer code (required when referencing source)
* DFN-Define fields
* em-emphasize br> * font-font settings (not recommended)
* I-Italic
* img-image
* input-input box
* KBD-Define keyboard text
* label-table label
* Q-Short reference
* S-underline (not recommended)
* Samp-define example computer code
* Select-Project selection
* Small-Small text
span-common inline container, define text inner area Block
* strike-Middle Dash
* Strong-Bold Accent
* sub-subscript
* sup-superscript
* TEXTAREA-multiline text input box
* tt-Telex text
* U-underline
* var-Define variable

Common block elements

* Address-addresses
* BLOCKQUOTE-Block reference
* Center-align Block
* DIR-List of directories
* Div-Common block-level easy, is also the main tag of CSS layout
* DL-Definition List
* Fieldset-form control Group
* Form-Interactive form
* H1-Big title
* H2-Subtitle
* H3-3 level Title
* H4-4 level Title
* H5-5 level Title
* H6-6 level Title
* HR-Horizontal divider Line
* Isindex-input Prompt
* menu-List of menus
* Noframes-frames Optional content, (for browsers that do not support frame, display this chunk content
* NoScript-) Optional script content (this content is displayed for browsers that do not support script)
* Ol-Sort Form
* P-Paragraph
* Pre-formatted text
* Table-form
* ul-Non-sorted list