Quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ?

Différence : la définition de la largeur et de la hauteur dans les éléments en ligne n'est pas valide et ne s'enroulera pas automatiquement ; tandis que les éléments au niveau du bloc peuvent définir la largeur et la hauteur et s'enrouler automatiquement. Dans les éléments en ligne, le paramètre de marge est valide dans les directions gauche et droite mais pas vers le haut et vers le bas, et le paramètre de remplissage dans les directions gauche et droite est valide mais pas vers le haut et vers le bas dans les éléments de niveau bloc, la marge et le remplissage le sont ; valide.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Dans les bases du CSS, on rencontre souvent des éléments block et des éléments inline. Dans le développement réel, ils sont souvent confus et difficiles à mémoriser. Alors, quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ? Laissez-moi vous le présenter ci-dessous.

Définition des éléments de niveau bloc et des éléments en ligne

Que sont les éléments de niveau bloc ?

• Démarre toujours sur une nouvelle ligne

• La hauteur, les marges et le remplissage sont tous contrôlables ;

La largeur par défaut est de 100 % de son conteneur, sauf si une largeur est spécifiée.
Il peut contenir des éléments en ligne et d'autres éléments de bloc
Par exemple :
, ,

~

,

---

,

,

, 
, 
, 
, , 
, 
 
Que sont les éléments en ligne ? 

 et les autres éléments sont sur la même ligne ; 
 la hauteur, la hauteur de la ligne, les marges et le remplissage ne peuvent pas être modifiés ; >
La largeur est la largeur de son texte ou de son image et ne peut pas être modifiée
Les éléments en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne
 
Par exemple : , , 
, , , , , , < select>, <sup>, <sub>, <em>, <del></p></li>[Tutoriel recommandé : "</ul>Tutoriel vidéo HTML<p>"]</p>
<p> <a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">La différence entre les éléments en ligne et les éléments de niveau bloc</a></p>
<p>1), les éléments en ligne <strong></strong>① : La définition de la largeur et de la hauteur n'est pas valide </p>
<p>② : Définir les directions gauche et droite de la marge Valide, mais le haut et le bas ne sont pas valides ; le réglage des directions gauche et droite est valide, mais le haut et le bas ne sont pas valides. </p>
<p>③ : ne s'enroulera pas automatiquement </p>
<p>2), élément au niveau du bloc </p>
<p>① : peut définir la largeur et la hauteur </p>
<p>② : réglage de la marge et du remplissage sont tous deux valides </p>
<p>③ : Peut automatiquement envelopper les lignes </p>
<p>④ : Plusieurs blocs, disposés de haut en bas par défaut </p>
<p>Pour plus de connaissances liées à la programmation, veuillez visiter : </p>Vidéo de programmation <p> ! ! </p><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Quels sont les attributs de la balise bouton HTML ?" href="https://m.php.cn/fr/faq/471257.html">Quels sont les attributs de la balise bouton HTML ?</a></span><span>Article suivant：<a class="dBlack" title="Quels sont les attributs de la balise bouton HTML ?" href="https://m.php.cn/fr/faq/471283.html">Quels sont les attributs de la balise bouton HTML ?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</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/fr/faq/471129.html" title="Comment supprimer le soulignement des hyperliens en HTML5" class="aBlack">Comment supprimer le soulignement des hyperliens en HTML5</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/471130.html" title="Comment définir l'épaisseur de HR en HTML" class="aBlack">Comment définir l'épaisseur de HR en HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/471133.html" title="De quoi est constitué un formulaire en HTML ?" class="aBlack">De quoi est constitué un formulaire en HTML ?</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/471154.html" title="Comment supprimer le soulignement du texte en HTML" class="aBlack">Comment supprimer le soulignement du texte en 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>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/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>