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
How to configure /var/log/messages in Ubuntu system log
1. Problem Description Today I need to check the ...
Implementation of Redis one master, two slaves and three sentinels based on Docker
I am currently learning about Redis and container...
Steps to package and deploy the Vue project to the Apache server
In the development environment, the vue project i...
Detailed explanation of DOM style setting in four react components
1. Inline styles To add inline styles to the virt...
Three Discussions on Iframe Adaptive Height Code
When building a B/S system interface, you often en...
Detailed explanation of the problems and solutions encountered in flex multi-column layout
Flex layout is undoubtedly simple and easy to use...
Analysis of the project process in idea packaging and uploading to cloud service
one. First of all, you have to package it in idea...
JavaScript article will show you how to play with web forms
1. Introduction Earlier we introduced the rapid d...
Implementation example of specifying container ip when creating a container in docker
When Docker creates a container, it uses the brid...
Alibaba Cloud Ubuntu 16.04 builds IPSec service
Introduction to IPSec IPSec (Internet Protocol Se...
How to Apply for Web Design Jobs
<br />Hello everyone! It’s my honor to chat ...
Introduction to Spark and comparison with Hadoop
Table of contents 1. Spark vs. Hadoop 1.1 Disadva...
How to use CURRENT_TIMESTAMP in MySQL
Table of contents Use of CURRENT_TIMESTAMP timest...
10 reasons why Linux is becoming more and more popular
Linux has been loved by more and more users. Why ...
Detailed explanation of mysql exists and not exists examples
Detailed explanation of mysql exists and not exis...