Home >Web Front-end >HTML Tutorial >What are inline elements and block-level elements? _html/css_WEB-ITnose

What are inline elements and block-level elements? _html/css_WEB-ITnose

WBOYOriginal: 2016-06-24 11:49:271601browse

1. What are inline elements and block-level elements?

Block-level elements


	information on author
	long quotation
	push button

table caption
	definition description
	deleted text
	generic language/style container
	definition list
	definition term
	form control group
	interactive form
	heading
	heading
	heading
	heading
	heading
	heading
	horizontal rule
</td> <td>inline subwindow</td> </tr> <tr> <td><ins></td> <td>inserted text</td> </tr> <tr> <td><legend></td> <td>fieldset legend</td> </tr> <tr> <td><li></td> <td>list item</td> </tr> <tr> <td><map></td> <td>client-side image map</td> </tr> <tr> <td><noframes></td> <td>alternate content container for non frame-based rendering</td> </tr> <tr> <td><noscript></td> <td>alternate content container for non script-based rendering</td> </tr> <tr> <td><object></td> <td>generic embedded object</td> </tr> <tr> <td><ol></td> <td>ordered list</td> </tr> <tr> <td><p></td> <td>paragraph</td> </tr> <tr> <td><pre class="brush:php;toolbar:false"></td> <td>preformatted text</td> </tr> <tr> <td><table></td> <td>table</td> </tr> <tr> <td><tbody></td> <td>table body</td> </tr> <tr> <td><td></td> <td>table data cell</td> </tr> <tr> <td><tfoot></td> <td>table footer</td> </tr> <tr> <td><th></td> <td>table header cell</td> </tr> <tr> <td><thead></td> <td>table header</td> </tr> <tr> <td><tr></td> <td>table row</td> </tr> <tr> <td><ul></td> <td>unordered list</td> </tr> </table> <p>Inline elements</p> <table> <tr> </tr> <tr> <td><a></td> <td>anchor</td> </tr> <tr> <td><abbr></td> <td>abbreviated form</td> </tr> <tr> <td><acronym></td> <td>acronym</td> </tr> <tr> <td><b></td> <td>bold text style</td> </tr> <tr> <td><bdo></td> <td>I18N BiDi over-ride</td> </tr> <tr> <td><big></td> <td>large text style</td> </tr> <tr> <td><br></td> <td>forced line break</td> </tr> <tr> <td><button></td> <td>push button</td> </tr> <tr> <td><cite></td> <td>citation</td> </tr> <tr> <td><code></td> <td>computer code fragment</td> </tr> <tr> <td><del></td> <td>deleted text</td> </tr> <tr> <td><dfn></td> <td>instance definition</td> </tr> <tr> <td><em></td> <td>emphasis</td> </tr> <tr> <td><i></td> <td>italic text style</td> </tr> <tr> <td><iframe></td> <td>inline subwindow</td> </tr> <tr> <td><img></td> <td>Embedded image</td> </tr> <tr> <td><input></td> <td>form control</td> </tr> <tr> <td><ins></td> <td>inserted text</td> </tr> <tr> <td><kbd></td> <td>text to be entered by the user</td> </tr> <tr> <td><label></td> <td>form field label text</td> </tr> <tr> <td><map></td> <td>client-side image map</td> </tr> <tr> <td><object></td> <td>generic embedded object</td> </tr> <tr> <td><q></td> <td>short inline quotation</td> </tr> <tr> <td><samp></td> <td>sample program output, scripts, etc.</td> </tr> <tr> <td><select></td> <td>option selector</td> </tr> <tr> <td><small></td> <td>small text style</td> </tr> <tr> <td><span></td> <td>generic language/style container</td> </tr> <tr> <td><strong></td> <td>strong emphasis</td> </tr> <tr> <td><sub></td> <td>subscript</td> </tr> <tr> <td><sup></td> <td>superscript</td> </tr> <tr> <td><textarea></td> <td>multi-line text field</td> </tr> <tr> <td><tt></td> <td>teletype or monospaced text style</td> </tr> <tr> <td><var></td> <td>instance of a variable or program argument</td> </tr> </table> <p><strong> 2. What is the difference between inline elements and block-level elements? </strong></p> <p><strong>1.</strong><strong>Size - an important difference between block-level elements and inline elements </strong></p> <p><strong>inline elements and width</strong></p> <p>The W3C CSS2 standard stipulates that the width attribute will not be applied to inline elements and non-replacement elements. </p> <p>In the following example, width:200px is applied to the inline element <a>. As you can see, it has no effect at all. </p> <p></p> <p><strong>Inline elements and height</strong></p> <p>The W3C CSS2 standard stipulates that the height attribute will not be applied to inline elements and non-replacement elements, but the box height can be passed through line -height to specify. </p> <p>In the following example, height:50px is applied to the inline element <a>. You can see that there is no effect. </p> <p></p> <p><strong>Inline elements and padding</strong></p> <p>You can set padding for inline elements, but only padding-left and padding-right take effect. </p> <p>In the following example, the inline element <a> has padding:50px applied. You can see that it affects the left and right content, but not the top and bottom. </p> <p></p> <p><strong>Inline elements and margin</strong></p> <p>The margin attribute is the same as the padding attribute. It is valid for the left and right of inline elements, but not for the top and bottom. </p> <p>In the example below, margin:50px is applied to <a>. You can see that the left and right edges are effective but the top and bottom content are not. </p> <p></p> <p>Remember that setting width for inline elements </p> <p> has no effect. <br>Setting height is invalid and can be set by line-height. <br> Setting margin is only valid for left and right margins, not for top and bottom. <br> Setting padding is only valid for left and right padding, not for top and bottom. Note that the scope of the element has increased, but it has no effect on the content around the element. You can see the effect just by looking at the picture </p> <p>The above part is translated from: http://www.maxdesign.com.au/ presentation/inline/</p> <p> </p> <p><strong>2. The text-align attribute is the difference between the two expressions </strong></p> <p> in the W3C CSS2.1 specification Section 16.2 describes text-align in detail: <br>---------------------------------- -------<br>Value: left \| right \| center \| justify \| inherit<br>Initial value: anonymous value, determined by the value of 'direction', if 'direction' is 'ltr' then ' left', or 'right' if 'direction' is 'rtl'. <br>Applies to: block-level elements, table cells, inline block elements<br>Inheritance: is<br>calculated value: initial value or specified value<br>---------- --------------------------------<br><br> This feature describes how to make a block element <strong>Inline content </strong> aligned. <br> Note that the standard says that this attribute is used to align <strong> inline content </strong>, so <strong> not </strong> should work on block-level content. <br> Explain, <strong>inline content</strong> refers to content composed of <strong>inline elements</strong>. Everyone knows about inline elements, such as SPAN elements, IFRAME elements and element style'display: inline ' are all inline elements; <strong>block-level content</strong> and are composed of block-level elements, and DIV is the most commonly used block-level element. The difference between block-level elements and inline elements is that block-level elements will be displayed on one line, while inline elements can be displayed side by side on one line. <br> In this way, our understanding of this feature should be clear. However, the question arises. Although the standard stipulates this, do all browsers comply with it? The answer is no. Guess which browser is so unique? IE! ! <br> <strong>In IE6/7 and IE8 mixed mode, text-align:center can center-align block-level elements. In other browsers, text-align:center only works on inline content. </strong><br> A better way to solve this problem is to set "margin-left:auto; margin-right:auto" for all block-level elements that need to be centered relative to the parent container. However, this method is not supported in the mixed mode of IE6/IE7/IE8, so the "text-align:center;" of the parent container must be set. </p> <p> If the inline content within the center-aligned child element does not need to be center-aligned, you also need to set "text-align:left" for it: </p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></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="CSS3 media queries for iPhone_html/css_WEB-ITnose" href="https://m.php.cn/faq/274961.html">CSS3 media queries for iPhone_html/css_WEB-ITnose</a></span><span>Next article：<a class="dBlack" title="CSS3 media queries for iPhone_html/css_WEB-ITnose" href="https://m.php.cn/faq/274963.html">CSS3 media queries for iPhone_html/css_WEB-ITnose</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/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</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></html>