Detailed explanation of the difference between inline elements and block-level elements

1. The difference between inline elements and block-level elements

1. Inline elements will not occupy the entire line and are arranged in a straight line. They are all on the same line, arranged horizontally;

Block-level elements will occupy one line, arranged vertically.

　2. Block-level elements can contain inline elements and block-level elements; inline elements cannot contain block-level elements.

3. The difference between the attributes of inline elements and block-level elements is mainly due to the box model attributes. The width setting of inline elements is invalid, the height is invalid (line-height can be set), and the margin up and down is invalid. , padding up and down is invalid.

2. Conversion of inline elements and block-level elements

Conversion of inline elements For block elements: display:block;

Block elements are converted into inline elements ： display:inline;

##3. Question extension

Question description: Why can the width and height of inline elements such as img and input be set?

Detailed answer:

Elements are the basis of the document structure. In CSS, each element generates a box (box, also translated as "box") that contains the content of the element. But different elements will be displayed differently. For example,

and

are different, and and

are also different. Different types are specified for different elements in the document type definition (DTD), which is one of the reasons why DTD is important to documents.

　

1. Replaceable and non-replaceable elements

From the characteristics of the element itself, it can be divided into replaceable and non-replaceable elements.

a) Replace element

Replacement element means that the browser determines the specific display content of the element based on its tag and attributes.

　For example, the browser will read the image information and display it based on the value of the src attribute of the tag, but if you view the (X)HTML code, you cannot see the actual content of the image; another example Determine whether to display an input box, radio button, etc. based on the type attribute of the tag.

　　(X), , , <select>, <object> in HTML are all replacement elements. These elements often have no actual content, that is, an empty element, for example: <p></p>　　<img src="cat.jpg" /><p>　　<input type="submit" name="Submit " value="Submit" /></p> <p>　 The browser will display these elements based on their tag type and attributes. Replaceable elements also generate boxes in their display. <br></p> b) Non-replaceable elements <p></p> Most elements of (X)HTML are non-replaceable elements, that is, their content is directly displayed to the user (such as a browser). For example: <p></p>　　<p>Paragraph content</p><p></p>　 Paragraph<p> is a non-replaceable element, and the text "Paragraph content" is fully displayed. <p></p>　2. Display elements<p></p> In addition to the classification methods of replaceable elements and non-replaceable elements, elements in CSS 2.1 also have other classification methods: block-level elements (block-level) and inline Element (inline-level, also translated as "inline" element). <p></p>　a) Block-level elements<p></p>　　The most obvious feature of an element that is visually formatted as a block is that it fills the content area of ​​its parent element horizontally by default, and on both its left and right sides Block-level elements are on their own line by default if there are no other elements. <p></p> Typical block-level elements are: <p>, <p>, <h1> to <h6>, and so on. <p></p> 　　Elements that are floated (float attribute, can float to the left or right) through CSS and set the display attribute to "block" or "list-item" are all block-level elements. . <p></p> <p>　 But floating elements are special. Due to floating, there may be other elements next to them. And "list-item" (list item <li>) will generate a dot symbol or numeric sequence in front of it. </p> <p>b) Inline elements</p> <p>Inline elements do not form a new content block, that is, there can be other elements around them, such as <a>, <span>, <strong>, etc., They are all typical inline-level elements. </p> <p> 　　 Elements whose display attribute is equal to "inline" are all inline elements. Almost all replaceable elements are inline elements, such as <img>, <input>, etc. </p> <p> However, the type of elements is not fixed. By setting the display attribute of CSS, inline elements can be changed into block-level elements, and block-level elements can also be changed into inline elements. </p> <p><span style="font-family: Microsoft YaHei"> 3. Conclusion: </span></p> <p><span style="font-family: 宋体"> Replacement elements generally have intrinsic dimensions, so they have width and height, which can be set. For example, if you do not specify the width and height of the img, it will be displayed according to its intrinsic size, which is the width and height of the image when it is saved. </span></p> <p><span style="font-family: 宋体">For form elements, browsers also have default styles, including width and height. </span></p><p>The above is the detailed content of Detailed explanation of the difference between inline elements and block-level elements. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="background related properties in css" href="https://m.php.cn/faq/358525.html">background related properties in css</a></span><span>Next article：<a class="dBlack" title="background related properties in css" href="https://m.php.cn/faq/358549.html">background related properties in css</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/841.html" title="Summary of what you must pay attention to about Border when writing CSS" class="aBlack">Summary of what you must pay attention to about Border when writing CSS</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/961.html" title="How to realize multi-style selection and real-time switching of styles_Experience exchange" class="aBlack">How to realize multi-style selection and real-time switching of styles_Experience exchange</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1345.html" title="Detailed usage analysis of marquee" class="aBlack">Detailed usage analysis of marquee</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/269606.html" title="CSS3中优雅降级和渐进增强的区别" class="aBlack">CSS3中优雅降级和渐进增强的区别</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>