What is the difference between inline elements and block-level elements?

Difference: Setting the width and height in inline elements is invalid and will not wrap automatically; while block-level elements can set width and height and can wrap automatically. In inline elements, the margin setting is valid in the left and right directions but not up and down, and the padding setting in the left and right directions is valid but not up and down; in block-level elements, both margin and padding are valid.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In the basics of CSS, we often encounter block elements and inline elements. In actual development, they are often confused and difficult to remember. So what is the difference between inline elements and block-level elements? Let me introduce it to you below.

Definition of block-level elements and inline elements

What are block-level elements?

• Always start on a new line;

• Height, line height, and margins and padding are all controllable;

• The width defaults to 100% of its container unless a width is set.

• It can accommodate inline elements and other block elements

For example:

, ,

~

,

---

,

,

, 
, 
, 
, , 
, 
 

What are inline elements? 

 and other elements are on the same line; 
 height, line height, margins and padding cannot be changed; 
The width is the width of its text or image and cannot be changed
Inline elements can only accommodate text or other inline elements
 
For example: , , 
, , , , , , < select>, <sup>, <sub>, <em>, <del></p>
<p>[Recommended tutorial: "<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html video tutorial</a>"]</p>
<p> <strong>The difference between inline elements and block-level elements</strong></p>
<p>1), inline elements</p>
<p>①: Setting the width and height is invalid</p>
<p>②: Set the left and right directions for margin Valid, but up and down is invalid; padding setting left and right directions is valid, but up and down is invalid. </p>
<p>③: Will not automatically wrap </p>
<p>2), block-level elements </p>
<p>①: Can set width and height </p>
<p>②: Setting margin and padding are both valid </p>
<p>③: Can automatically wrap lines </p>
<p>④: Multiple blocks, the default arrangement is from top to bottom </p>
<p> For more programming-related knowledge, please visit: <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频"> Programming Video </a>! ! </p><p>The above is the detailed content of What is 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="What are the attributes of the HTML button tag?" href="https://m.php.cn/faq/471257.html">What are the attributes of the HTML button tag?</a></span><span>Next article：<a class="dBlack" title="What are the attributes of the HTML button tag?" href="https://m.php.cn/faq/471283.html">What are the attributes of the HTML button tag?</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/471129.html" title="How to remove the underline of hyperlinks in html5" class="aBlack">How to remove the underline of hyperlinks in html5</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/471130.html" title="How to set the thickness of hr in html" class="aBlack">How to set the thickness of hr in html</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/471133.html" title="What does a form in HTML consist of?" class="aBlack">What does a form in HTML consist of?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/471154.html" title="How to remove underline from text in html" class="aBlack">How to remove underline from text in html</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>