Home > Article > Web Front-end > What is the difference between inline elements and block-level elements?

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

青灯夜游Original: 2021-03-01 16:35:0339249browse

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="http://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="http://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="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://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="http://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="http://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="http://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><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai"  >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs"  ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a  onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan "  href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a  onclick="javascript:;" class="language course-right-orders chooselan chooselanguage"  href="javascript:;"><span>English</span><span>（EN）</span></a><a  onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan "  href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a  onclick="javascript:setlang('ja');" class="language course-right-orders chooselan "  href="javascript:;"><span>日本語</span><span>（JA）</span></a><a  onclick="javascript:setlang('ko');" class="language course-right-orders chooselan "  href="javascript:;"><span>한국어</span><span>（KO）</span></a><a  onclick="javascript:setlang('ms');" class="language course-right-orders chooselan "  href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a  onclick="javascript:setlang('fr');" class="language course-right-orders chooselan "  href="javascript:;"><span>Français</span><span>（FR）</span></a><a  onclick="javascript:setlang('de');" class="language course-right-orders chooselan "  href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script>            var swiper = new Swiper('.nphpNavSwiper1', {
                slidesPerView : 'auto',
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper

            });
        </script></div></div><!--顶部导航 end--><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>