What are HTML inline elements and block-level elements and their differences
|
I remember a question the interviewer asked during a previous job interview: What are inline elements and how are they different from block-level elements? This is a very basic interview question, but many beginners usually only focus on the semantics of tags and ignore the inline and block-level characteristics of tags. Therefore, they may not be able to answer the above question or answer it incompletely. Common inline elements in HTML are: <span>, <a>, <img>, <input>, <textarea>, <select>, <label> There are also some text elements such as: <br>, <b>, <strong>, <sup>, <sub>, <i>, <em>, <del>, <u>, etc. It would be unreasonable to only answer <span> and <img>. Common block-level elements in HTML are: <div>, <table>, <form>, <p>, <ul>, <h1>......<h6>, <hr>, <pre>, <address>, <center>, <marquee>, <blockquote>, etc. If I only answer <div>, that would be unreasonable. So what is the difference between them? Block-level elements 1. Always start from a new line, that is, each block-level element occupies a line and is arranged vertically downward by default; 2. Height, width, margin and padding are all controllable, and the settings are effective, with margin effects; 3. When the width is not set, the default is 100%; 4. Block-level elements can contain block-level elements and inline elements. Inline elements 1. In a row with other elements, that is, inline elements and other inline elements are arranged in a horizontal line; 2. The height and width are uncontrollable and the settings are invalid. They are determined by the content. Setting margin is effective on the left and right, and has a margin effect; Setting margins top and bottom will expand the space but will not produce a margin effect (i.e. the box model margin-top/bottom has values, but there is no margin effect on the page). Setting padding left and right is effective, setting padding top and bottom will expand the space but will not produce a margin effect (same as above). The padding effect is shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
span{
border:1px solid red;
padding:10px;
}
div{
border:1px solid blue;
}
</style>
<body>
<div>Block-level element</div>
<span>Inline element</span>
<span>Inline element</span>
<div>Block-level element</div>
</body>
</html>
3. According to the concept of tag semantics, inline elements should only contain inline elements and not block-level elements. Conversion Of course, the characteristics between block-level elements and inline elements can be converted to each other. HTML can divide elements into three types: inline elements, block elements, and inline-block elements. Use the display property to convert the three into any of the following: (1) display: inline; converted to inline elements; (2) display:block; converted to block elements; (3) display: inline-block; Convert to inline block element. Inline block elements combine the characteristics of inline elements and block elements: (1) No automatic line wrapping, and all other inline elements are arranged on a horizontal line; (2) Height, width, margin and padding are all controllable, and the settings are effective, with margin effects; (3) The default arrangement is from left to right. This concludes this article about what HTML inline elements and block-level elements are and their differences. For more information about HTML inline elements and block-level elements, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Detailed introduction to MySQL database index
>>: Docker deployment and installation steps for Jenkins
Recommend
Detailed explanation of MySQL limit usage and performance analysis of paging query statements
Limit usage When we use query statements, we ofte...
Key points for writing content of HTML web page META tags
The META tag is an auxiliary tag in the head area...
Zabbix monitors mysql instance method
1. Monitoring planning Before creating a monitori...
Problems with nodejs + koa + typescript integration and automatic restart
Table of contents Version Notes Create a project ...
Solution to the problem of MySQL thread in Opening tables
Problem Description Recently, there was a MySQL5....
MySQL Practical Experience of Using Insert Statement
Table of contents 1. Several syntaxes of Insert 1...
Introduction to the use of the four major sql ranking functions ROW_NUMBER, RANK, DENSE_RANK, NTILE
1. ROW_NUMBER() Definition: The ROW_NUMBER() func...
Example of how to implement MySQL cascading replication
The so-called cascading replication is that the m...
How to control the startup order of docker compose services
summary Docker-compose can easily combine multipl...
MySQL 8.0.22 installation and configuration method graphic tutorial under Windows 10
MySQL 8.0.22 installation and configuration metho...
JavaScript to implement the most complete code analysis of a simple shopping cart (ES6 object-oriented)
This article shares the specific code of JavaScri...
How to export mysql query results to csv
To export MySQL query results to csv , you usuall...
Introduction to JavaScript conditional access attributes and arrow functions
Table of contents 1. Conditional access attribute...
Implementing Priority Queue in JavaScript
Table of contents 1. Introduction to priority que...
The front-end page pop-up mask prohibits page scrolling
A problem that front-end developers often encount...