interface Webtutoriel CSSPourquoi Margin-Top ne fonctionne-t-il pas sur les éléments en ligne, mais bien sur les éléments en bloc en ligne ?
Inline vs Inline-Block : pourquoi Margin-Top ne fonctionne qu'avec Inline-Block
La question
Lors de l'utilisation de HTML et CSS, un l'utilisateur tente de créer une marge supérieure pour un
élément, mais il n'apparaît que lorsque la propriété CSS display est définie sur inline-block, pas lorsqu'elle est définie sur inline.Explication
La spécification CSS définit la différence entre inline et inline-block comme suit :
- inline-block : Crée un conteneur de blocs de niveau en ligne où le le contenu interne de l'élément est formaté comme une boîte de bloc et l'élément lui-même est formaté comme une boîte de niveau en ligne.
- inline : génère une ou plusieurs boîtes en ligne.
La spécification CSS2 stipule que les éléments en ligne ne respectent que les marges horizontales (par exemple, margin-left).
La distinction
La différence réside dans la manière dont les éléments en ligne et en ligne sont traités :
- En ligne les éléments sont considérés comme de véritables éléments en ligne, les éléments de bloc en ligne sont traités comme des blocs, mais sont visuellement alignés avec un un autre.
- Les éléments de niveau bloc (comme inline-block) respectent les marges horizontales et verticales, tandis que les éléments en ligne ne respectent que les marges horizontales.
Résolution
Par conséquent , dans le cas prévu, définir l'affichage sur en ligne sur le
L'élément applique uniquement les marges horizontales, ce qui n'inclut pas la marge supérieure. Cependant, définir l'affichage sur inline-block permet d'appliquer des marges horizontales et verticales, y compris la marge supérieure.
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!
@KeyFrames CSS: les astuces les plus utiliséesMay 08, 2025 am 12:13 AM@ KeyframeSispopulardUetOtsSversatity andpowerCreatingsMoothcSSanimations.KeyTrickSinclude: 1) DefiingsMoothTransitionsBetwean
Compteurs CSS: un guide complet de la numérotation automatiqueMay 07, 2025 pm 03:45 PMCSSCOUNTERSAREUSEUSTTOMAGAUTAMAMATALUMENTSINDWEBDESIGNS.1) Ils ont été des cas de contenu, des listitems et de la forme.
Ombres de défilement moderne à l'aide d'animations axées sur le défilementMay 07, 2025 am 10:34 AML'utilisation d'ombres de défilement, en particulier pour les appareils mobiles, est un peu de UX subtil que Chris a couvert auparavant. Geoff a couvert une approche plus récente qui utilise la propriété d'animation-timeline. Voici encore une autre façon.
Revisiter les cartes d'imageMay 07, 2025 am 09:40 AMPassons à travers un rafraîchissement rapide. Les cartes d'image datent jusqu'à HTML 3.2, où, d'abord, les cartes côté serveur, puis les cartes côté client ont défini les régions cliquables sur une image à l'aide de cartes et d'éléments de zone.
État des développeurs: une enquête pour chaque développeurMay 07, 2025 am 09:30 AML'enquête sur l'état des développeurs est désormais ouverte à la participation, et contrairement aux enquêtes précédentes, il couvre tout sauf le code: carrière, lieu de travail, mais aussi santé, passe-temps, etc.
Qu'est-ce que CSS Grid?Apr 30, 2025 pm 03:21 PMCSS Grid est un outil puissant pour créer des dispositions Web complexes et réactives. Il simplifie la conception, améliore l'accessibilité et offre plus de contrôle que les méthodes plus anciennes.
Qu'est-ce que CSS Flexbox?Apr 30, 2025 pm 03:20 PML'article traite de CSS Flexbox, une méthode de mise en page pour l'alignement et la distribution efficaces de l'espace dans les conceptions réactives. Il explique l'utilisation de Flexbox, la compare à la grille CSS et détaille la prise en charge du navigateur.
Comment pouvons-nous rendre notre site Web réactif à l'aide de CSS?Apr 30, 2025 pm 03:19 PML'article traite des techniques de création de sites Web réactifs à l'aide de CSS, y compris des balises de méta de la fenêtre, des grilles flexibles, des médias fluides, des requêtes multimédias et des unités relatives. Il couvre également l'utilisation de la grille CSS et de Flexbox ensemble et recommande le cadre CSS
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Dreamweaver CS6
Outils de développement Web visuel
PhpStorm version Mac
Le dernier (2018.2.1) outil de développement intégré PHP professionnel
Listes Sec
SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
MinGW - GNU minimaliste pour Windows
Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.
