Overview and differences between html inline elements and html block-level elements
|
Block-level element features : •Always occupies a line by itself, starting from a new line, and the elements that follow must also be displayed on a new line; •Width, height, padding and margin can all be controlled; Inline element properties : • On the same line as adjacent inline elements; • The width (width), height (height), top/bottom of the inner margin (padding-top/padding-bottom) and top/bottom of the outer margin (margin-top/margin-bottom) cannot be changed, that is, the size of the text or picture inside; The main block-level elements are : Copy code The code is as follows:address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul The main inline elements are : Copy code The code is as follows:a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup , textarea , tt , u , var Variable elements (determine whether the element is a block element or an inline element based on the context) : Copy code The code is as follows:applet ,button ,del ,iframe , ins ,map ,object , script Application of block-level and inline elements in CSS : By using CSS, we can get rid of the restrictions of HTML tag classification in the table above and freely apply the attributes we need to different tags/elements. The main CSS styles used are the following three : •display:block -- Display as a block-level element •display:inline -- Display as an inline element • dipslay:inline-block -- Displayed as an inline block element, it is displayed in the same row and can modify properties such as width, height, inner and outer margins. We often add the display:inline-block style to the <ul> element, so that the originally vertical list can be displayed horizontally. Off topic : I recently sorted out some knowledge about the difference between block-level elements and inline elements. I found a lot of related articles on the Internet and found that everyone's understanding seemed to be wrong. I tested it myself and found a lot of problems : 1. The margin-left / margin-right and padding-left / padding-right of inline elements can be controlled, so the width of inline elements can be controlled by these four properties. 2. Block-level element tags can also be placed inside inline elements, and the internal block-level element tags will expand the external inline tags, so the height of inline elements can be controlled by placing block elements (it is introduced on the Internet that inline elements can only hold text and other inline elements) For example: Copy code The code is as follows:<a> <div style="width:100px;height:100px;">Test</div> </a> |
<<: Detailed explanation of the benefits of PNG in various network image formats
>>: Methods and steps to use http-proxy-middleware to implement proxy cross-domain in Node
Recommend
Vue2.x - Example of using anti-shake and throttling
Table of contents utils: Use in vue: explain: Ima...
What is ssh? How to use? What are the misunderstandings?
Table of contents Preface What is ssh What is ssh...
A brief talk about calculated properties and property listening in Vue
Table of contents 1. Computed properties Syntax: ...
Semantics, writing, and best practices of link A
The semantics, writing style, and best practices ...
Vue+ECharts realizes the drawing of China map and automatic rotation and highlighting of provinces
Table of contents Achieve results Complete code +...
MySQL 8.0.20 installation and configuration tutorial under Win10
MySQL 8.0.20 installation and configuration super...
Screen command and usage in Linux
Screen Introduction Screen is a free software dev...
Detailed explanation of the front-end framework for low-threshold development of iOS, Android, and mini-program applications
Nowadays, cross-platform development technology i...
MySQL detailed explanation of isolation level operation process (cmd)
Read uncommitted example operation process - Read...
Example of Form action and onSubmit
First: action is an attribute of form. HTML5 has d...
Solve the mysql user deletion bug
When the author was using MySQL to add a user, he...
Detailed explanation of achieving high availability of eureka through docker and docker-compose
Recently, new projects have used springcloud and ...
Setting up a proxy server using nginx
Nginx can use its reverse proxy function to imple...
Docker deployment RabbitMQ container implementation process analysis
1. Pull the image First, execute the following co...
Introduction to HTML Chinese Character Encoding Standard
In HTML, you need to specify the encoding used by...