Maison interface Web tutoriel HTML Que sont les éléments en ligne et les éléments de niveau bloc ?

Que sont les éléments en ligne et les éléments de niveau bloc ?

Aug 17, 2023 am 11:33 AM
html 行内元素 块级元素

Les éléments en ligne incluent div, p, h1-h6, ul, ol, li, table, form, etc. ; les éléments au niveau du bloc incluent span, a, img, strong, em, input, label, etc. Les caractéristiques des deux éléments : 1. Les éléments en ligne occuperont une ligne, rempliront automatiquement la largeur du conteneur parent, pourront définir la largeur, la hauteur, les marges intérieures et extérieures et d'autres attributs, et pourront contenir d'autres éléments au niveau du bloc et des éléments en ligne. ; 2. Les éléments en ligne n'occuperont pas une ligne exclusive, la largeur et la hauteur sont déterminées par le contenu, et les marges intérieures et extérieures n'affectent que la disposition des éléments eux-mêmes, etc.

Que sont les éléments en ligne et les éléments de niveau bloc ?

L'environnement d'exploitation de cet article : système Windows 10, ordinateur Dell G3.

Les éléments en ligne et les éléments de niveau bloc sont deux types d'éléments en HTML, et ils sont affichés et se comportent différemment sur la page.

Éléments au niveau du bloc :

Les éléments courants au niveau du bloc incluent div, p, h1-h6, ul, ol, li, table, form, etc.

Les éléments au niveau du bloc occuperont une ligne et rempliront automatiquement la largeur du conteneur parent même si la largeur n'est pas définie.

Les éléments au niveau du bloc peuvent définir des attributs tels que la largeur, la hauteur, les marges intérieures et extérieures, etc.

Les éléments de niveau bloc peuvent contenir d'autres éléments de niveau bloc et des éléments en ligne.

Éléments en ligne :

Les éléments en ligne courants incluent span, a, img, strong, em, input, label, etc.

Les éléments en ligne n'occuperont pas une seule ligne, ils seront automatiquement disposés au sein d'une même ligne en fonction de la taille du contenu.

La largeur et la hauteur des éléments en ligne sont déterminées par le contenu, et les attributs de largeur et de hauteur ne peuvent pas être définis directement.

Les marges intérieures et extérieures des éléments en ligne n'affectent que la disposition de l'élément lui-même et ne changeront pas la position des autres éléments.

Les éléments en ligne ne peuvent pas contenir d'éléments de niveau bloc, mais ne peuvent contenir que d'autres éléments en ligne ou du contenu textuel.

Il convient de noter que certains éléments en HTML5 peuvent se comporter comme des éléments de niveau bloc ou des éléments en ligne selon le contexte. Par exemple, la balise a est un élément en ligne par défaut, mais si vous définissez l'attribut display: block; sur la balise a, elle deviendra un élément de niveau bloc.

Résumé :

Les éléments en ligne et les éléments au niveau du bloc ont des performances différentes en termes de mise en page et de paramètres de style. Les éléments de niveau bloc occuperont une ligne exclusive, et la largeur, la hauteur et les marges intérieures et extérieures peuvent être définies, et ils peuvent contenir d'autres éléments de niveau bloc et les éléments en ligne sont disposés sur la même ligne en fonction du contenu ; la taille, et la largeur et la hauteur ne peuvent pas être définies. Les marges intérieures et extérieures n'affectent que l'élément lui-même. L'arrangement ne peut contenir que d'autres éléments en ligne ou du contenu textuel.

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!

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Bordure de tableau en HTML Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

Bordure de tableau en HTML

Tableau imbriqué en HTML Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

Tableau imbriqué en HTML

Marge gauche HTML Marge gauche HTML Sep 04, 2024 pm 04:48 PM

Marge gauche HTML

Disposition du tableau HTML Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

Disposition du tableau HTML

Déplacer du texte en HTML Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

Déplacer du texte en HTML

Liste ordonnée HTML Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

Liste ordonnée HTML

Comment analysez-vous et traitez-vous HTML / XML dans PHP? Comment analysez-vous et traitez-vous HTML / XML dans PHP? Feb 07, 2025 am 11:57 AM

Comment analysez-vous et traitez-vous HTML / XML dans PHP?

Bouton HTML onclick Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

Bouton HTML onclick

See all articles