I remember a question asked by the interviewer during the previous job interview: What are the elements in the industry and what is the difference between them and block-level elements? This is a very basic interview question, but many beginners usually only focus on label semantics and ignore the characteristics of labels within and block level. Therefore, it is very likely that the above questions cannot be answered or answered incompletely.
Common in-line elements in HTML are:<span>, <a>, <img>, <input>, <textarea>, <select>, <label>
It also includes some text elements such as: <br> , <b>, <strong>, <sup> , <sub>, <i> , <em> , <del>, <u>, etc.
If you only answer <span> and <img>, it would be unreasonable.
Common block-level elements in HTML are:<div>, <table>, <form>, <p>, <ul>,
<h1>......<h6>, <hr> , <pre>, <address>, <center>, <marquee>, <blockquote>, etc.
If you only answer <div>, it would be unreasonable.
So what is the difference between them?Block-level elements
1. Always start with a new line, that is, each block-level element takes up one line, and is arranged vertically downward by default;
2. Height, width, margin and padding are all controllable, with effective settings and margin effects;
3. When the width is not set, the default is 100%;
4. Block-level elements can contain block-level elements and in-line elements.
·In-line elements
1. It is in the same line as other elements, that is, the elements in the line and other elements in the line will be arranged on a horizontal line;
2. The height and width are uncontrollable, and the settings are invalid and determined by the content.
Setting margin is effective on the left and right, with margin effect;
Setting margin will support space up and down will not produce margin effects (that is, margin-top/bottom has values on the box model, but there is no margin effect on the page).
Setting padding left and right is effective. Setting padding up and down will make the space larger but will not produce a margin effect (same as above).
The padding effect is shown as follows:
<!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> In-line element</span> <span> In-line element</span> <div>Block level element</div> </body></html>3. According to the concept of label semantics, it is best to include only in-line elements and not block-level elements.
ConvertOf course, the characteristics between block-level elements and in-line elements can be converted to each other. HTML can divide elements into three types: in-row elements, block elements and in-row block elements.
Use the display attribute to convert the three into arbitrary conversion:
(1) display:inline; convert to inline elements;
(2) display:block; convert to block elements;
(3) display:inline-block; convert to inline block elements.
The in-line block elements combine the characteristics of the in-line elements and the in-line elements:(1) If the line wrap is not automatically wrapped, it will be arranged on a horizontal line with other line elements;
(2) Height, width, margin and padding are all controllable, with effective settings and margin effects;
(3) The default arrangement is from left to right.
This is the end of this article about the details of what are the differences between HTML elements and block-level elements. For more related HTML elements and block-level elements, please search for previous articles from Wulin.com or continue to browse the related articles below. I hope everyone will support Wulin.com in the future!