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
Vue3 encapsulates its own paging component
This article example shares the specific code of ...
mysql solves the problem of finding records where two or more fields are NULL
Core code /*-------------------------------- Find...
Detailed explanation of how to automatically add prefix plugin after CSS3 packaging: autoprefixer
The project scaffolding built with vue-cli has al...
How to implement HTML Table blank cell completion
When I first taught myself web development, there...
Six methods for nginx optimization
1. Optimize Nginx concurrency [root@proxy ~]# ab ...
About Zabbix forget admin login password reset password
The problem of resetting the password for Zabbix ...
How to install Postgres 12 + pgadmin in local Docker (support Apple M1)
Table of contents introduce Support Intel CPU Sup...
CSS uses Alibaba vector library to quickly add good-looking icon effects to the corresponding positions (example code)
Enter Alibaba vector icon library Alibaba Vector ...
Restart all stopped Docker containers with one command
Restart all stopped Docker containers with one co...
Quickly install MySQL5.7 compressed package on Windows
This article shares with you how to install the M...
About the bug of better-scroll plug-in that cannot slide (solved by plug-in in 2021)
Better-scroll scrolling principle As a parent con...
react-diagram serialization Json interpretation case analysis
The goal of this document is to explain the Json ...
Detailed steps and problem solving methods for installing MySQL 8.0.19 on Linux
I recently bought a Tencent Cloud server and buil...
Installation of various versions of MySQL 8.0.18 and problems encountered during installation (essence summary)
Summary: Problem solving records of MYSQL: No mat...
Solution to the problem of data loss when using Replace operation in MySQL
Preface The company's developers used the rep...