What are the inline block-level elements in html?-HTML Tutorial-php.cn

", which defines the button; 2. "", which defines the input field; 3. "

"; 4. "<select>"; 5. " <img>"; 6. "<td>"; 7. "<th>"; 8. "<object>", etc."/><meta property="og:local" content="faq">
<meta property="og:title" content="What are the inline block-level elements in html?-HTML Tutorial-php.cn">
<meta property="og:description" content="The block-level elements in the HTML line include: 1. "<button>", which defines the button; 2. "<input>", which defines the input field; 3. "<textarea>"; 4. "<select>"; 5. " <img>"; 6. "<td>"; 7. "<th>"; 8. "<object>", etc.">
<meta property="og:url" content="https://m.php.cn/faq/484357.html">
<meta property="og:image" content="https://img.php.cn/upload/article/202111/17/2021111710434939861.jpg">
<meta property="og:site_name" content="php.cn">
<meta property="og:type" content="website">
<link rel="canonical" href="https://m.php.cn/faq/484357.html"/>
<link rel="alternate" hrefLang="zh-cn" href="https://m.php.cn/zh/faq/484357.html" />
<link rel="alternate" hrefLang="en" href="https://m.php.cn/faq/484357.html" />
<link rel="alternate" hrefLang="zh-tw" href="https://m.php.cn/zh-tw/faq/484357.html" />
<link rel="alternate" hrefLang="ja" href="https://m.php.cn/ja/faq/484357.html" />
<link rel="alternate" hrefLang="ko" href="https://m.php.cn/ko/faq/484357.html" />
<link rel="alternate" hrefLang="ms" href="https://m.php.cn/ms/faq/484357.html" />
<link rel="alternate" hrefLang="fr" href="https://m.php.cn/fr/faq/484357.html" />
<link rel="alternate" hrefLang="de" href="https://m.php.cn/de/faq/484357.html" />
<meta charset="utf-8" /><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><meta name="applicable-device" content="mobile" /><link rel="stylesheet" href="/static/css/style.css?4.5.31"><link href="/static/front/mobcss/newphpcommon.css?1.1" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/swiper.min.css" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/newphp.css?1.2" type="text/css" rel="stylesheet"/><link href="/static/css/global.css" type="text/css" rel="stylesheet"/><link href="/static/layui/css/layui.css" type="text/css" rel="stylesheet"/><link href="/static/mobcss/mobindex3.css" type="text/css" rel="stylesheet"/><script src="/static/front/mobjs/jquery-1.6.1.min.js"></script><script src="/static/front/mobjs/swiper.min.js"></script><script src="/static/front/mobjs/newphpcommon.js"></script><script>    var canshu = {
        SeeMore:'See more',
        FoldUp:'Fold up',
        Choice:'LANGUAGE',
        wait:'Loading, please wait~',
        LoginFirst:"Please log in first",
        needKeyword:'Enter keyword search',
        emailPhoneError:'Please enter the correct phone or email address',
        missPwd:'Please enter the password',
        emailError:'Please enter your correct email address',
        VerCode:"Please enter the verification code",
        getCode:'Sending',
        pwdError:'Incorrect password format',
        TwoPassNotMatch:'Two passwords do not match',
        Bindemail:'Bind email',
        resetpassword:'reset password',
        ConfirmPass:'Confirm Password',
        pwdCheck:'Please enter 6-18 letters or numbers',
        Editinfor: 'Edit personal information',
        trimContent:'Please enter content',
        titleCheck:'Title should be at least 5 words long',
        choiceLang:'Please select a language classification',
        Secondreply:'reply',
        NetWorkError:'Network error, please try again later!',
        all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de'
    };
</script><script>
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;
        f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-WWVXRJPW');
</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-H42EVCYBJC"></script><script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-H42EVCYBJC');
</script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5902227090019525" crossorigin="anonymous"></script><meta property="article:author" content="青灯夜游" /><meta property="article:published_first" content=",https://www.php.cn/faq/484357.html" /><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css?1"><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault1.css"><link href="/static/mobcss/newphp.css" type="text/css" rel="stylesheet"/><script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script><script>      var xnb_name = 'Virtual currency';
      </script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","headline":"What are the inline block-level elements in html?","description":"The block-level elements in the HTML line include: 1. \"<button>\", which defines the button; 2. \"<input>\", which defines the input field; 3. \"<textarea>\"; 4. \"<select>\"; 5. \" <img>\"; 6. \"<td>\"; 7. \"<th>\"; 8. \"<object>\", etc.","image":["https:\/\/img.php.cn\/upload\/article\/202111\/17\/2021111710434939861.jpg"],"datePublished":"2021-11-17T10:51:17+8:00","author":{"url":"http:\/\/m.php.cn\/member\/287557.html","name":"青灯夜游"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/faq\/484357.html"},"url":"https:\/\/m.php.cn\/faq\/484357.html","articleBody":"<blockquote><p>htmlInline block-level elements include: 1. \"<button>\", defines the button; 2. \"<input>\", defines the input field; 3. \"<textarea>\"; 4. \"<select>\"; 5. \"<img>\"; 6. \"<td>\"; 7. \"<th>\"; 8. \"<object>\", etc. <\/p><\/blockquote>\n<p><img  src=\"https:\/\/img.php.cn\/upload\/article\/202111\/17\/2021111710434939861.jpg\" alt=\"What are the inline block-level elements in html?\" ><\/p>\n<p>The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer. <\/p>\n<p><span style=\"font-size: 18px;\"><strong>Inline-block element inline-block<\/strong><\/span><\/p>\n<p>Inline block-level element, which has the characteristics of block-level elements and inline elements Features, it can freely set the element width and height, and can also place multiple inline block-level elements in a row. For example: input and img are inline block-level elements, which can set the height and width and multiple elements per line.\nThe specific features are as follows: <\/p>\n<ul style=\"list-style-type: disc;\">\n<li><p> Height, line height, margins and padding can all be controlled; <\/p><\/li>\n<li><p>The default width is its own content Width, does not occupy one line, but there will be a blank gap between them. Set the font-size of the previous level to 0 to eliminate the gap; <\/p><\/li>\n<\/ul>\n<p><strong>Inline block level What are the elements? <\/strong><\/p>\n<ul style=\"list-style-type: disc;\">\n<li><p><code><button><\/code>: Define a button<\/p><\/li>\n<li><p>##<input><code> : Specifies the input fields in which users can enter data. This element is used within the <form> element to declare an input control that allows the user to enter data. <\/code><\/p><\/li>\n<li><p><textarea><code>: Define a multi-line text input control. A text area can hold an unlimited amount of text, and the default font for the text is a fixed-width font (usually Courier). <\/code><\/p><\/li>\n<li><p><select><code>: Create a drop-down list. <\/code><\/p><\/li>\n<li><p><img><code>: Define images in HTML pages<\/code><\/p><\/li>\n<li>##<td><p>: Define standard cells in HTML tables<code><\/code><\/p>\n<\/li>##<th><li>: Define header cells in HTML tables<p><code><\/code><\/p>\n<\/li><object><li>\n<p><code><\/code><\/p>......<\/li>\n<li>\n<p><\/p>Recommended tutorial: \"<\/li>html Video tutorial<\/ul>》<p><\/p>"}</script></head><body><div class="bodyBg"><div class="nphpHead"><div class="nphpTop"><div class="nphpTopIn"><div class="nphpLogo"><a href="http://m.php.cn/" title="php.cn"></a></div><div class="nphpSubmit"><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><a href="http://m.php.cn/login"  class="bg3"></a></div></div></div><div class="nphpNav"><div class="nphpNavIn"><div class="swiper-container nphpNavSwiper"><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="swiper-slide"><a href="http://m.php.cn/update/article_0_1.html" >Recent Updates</a></div><div class="clear"></div></div></div><script>                var swiper = new Swiper('.nphpNavSwiper', {
                    slidesPerView : 'auto'
                });
            </script></div></div></div><div class="bodyMain"><div class="nphpSize"><div class="nphpSizeIn"><b></b><p><a href="http://m.php.cn/" title="Home" class="bBlack">Home</a>  >  
        <a href="http://m.php.cn/article.html"   title="Article" class="bBlack">Article</a>  >  <a href="http://m.php.cn/web-designer.html" class="cBlack">Web Front-end</a>         >   What are the inline block-level elements in html?</p><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>What are the inline block-level elements in html?</h1><div class="nphpQianTitleIn"><span><img data-src="https://img.php.cn/upload/avatar/000/287/557/5bef70171e9f3249.jpg" alt="青灯夜游"  class="lazyload" src="/static/front/mobimages/moren/moren.png" /></span><dl><dt><em>青灯夜游</em><i class='bg1'>Original</i><div class="clear"></div></dt><dd><em>2021-11-17 10:51:17</em><i>7284browse</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><blockquote><p>htmlInline block-level elements include: 1. "<button>", defines the button; 2. "<input>", defines the input field; 3. "<textarea>"; 4. "<select>"; 5. "<img>"; 6. "<td>"; 7. "<th>"; 8. "<object>", etc. </p></blockquote>
<p><img  src="https://img.php.cn/upload/article/202111/17/2021111710434939861.jpg" alt="What are the inline block-level elements in html?" ></p>
<p>The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer. </p>
<p><span style="font-size: 18px;"><strong>Inline-block element inline-block</strong></span></p>
<p>Inline block-level element, which has the characteristics of block-level elements and inline elements Features, it can freely set the element width and height, and can also place multiple inline block-level elements in a row. For example: input and img are inline block-level elements, which can set the height and width and multiple elements per line.
The specific features are as follows: </p>
<ul style="list-style-type: disc;">
<li><p> Height, line height, margins and padding can all be controlled; </p></li>
<li><p>The default width is its own content Width, does not occupy one line, but there will be a blank gap between them. Set the font-size of the previous level to 0 to eliminate the gap; </p></li>
</ul>
<p><strong>Inline block level What are the elements? </strong></p>
<ul style="list-style-type: disc;">
<li><p><code><button></code>: Define a button</p></li>
<li><p>##<input><code> : Specifies the input fields in which users can enter data. This element is used within the <form> element to declare an input control that allows the user to enter data. </code></p></li>
<li><p><textarea><code>: Define a multi-line text input control. A text area can hold an unlimited amount of text, and the default font for the text is a fixed-width font (usually Courier). </code></p></li>
<li><p><select><code>: Create a drop-down list. </code></p></li>
<li><p><img><code>: Define images in HTML pages</code></p></li>
<li>##<td><p>: Define standard cells in HTML tables<code></code></p>
</li>##<th><li>: Define header cells in HTML tables<p><code></code></p>
</li><object><li>
<p><code></code></p>......</li>
<li>
<p></p>Recommended tutorial: "</li>html Video tutorial</ul>》<p></p><p>The above is the detailed content of What are the inline block-level elements in html?. 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="How to set div background image in html" href="http://m.php.cn/faq/484246.html">How to set div background image in html</a></span><span>Next article：<a class="dBlack" title="How to set div background image in html" href="http://m.php.cn/faq/484365.html">How to set div background image in html</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/484205.html" title="How to set the font color of the a tag in html" class="aBlack">How to set the font color of the a tag in html</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/484210.html" title="Is innerhtml a jquery method?" class="aBlack">Is innerhtml a jquery method?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/484212.html" title="How to change button color in html" class="aBlack">How to change button color in html</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/484243.html" title="How to hide html elements in javascript" class="aBlack">How to hide html elements in javascript</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/484246.html" title="How to set div background image in html" class="aBlack">How to set div background image 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><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>