Marge gauche HTML-tutoriel HTML-php.cn

Marge gauche HTML

王林

Libérer： 2024-09-04 16:48:19

original

470 Les gens l'ont consulté

HTML margin-left définit la zone de marge sur le côté gauche d'un élément. HTML comporte de nombreuses balises prédéfinies utilisées pour créer des pages Web plus efficacement et, de plus, les styles CSS sont plus avancés et décorés dans les sites Web. En utilisant cette terminologie, l’utilisateur attirera les sites Web plus fréquemment, ce qui est donc utile pour les perspectives commerciales. Les propriétés de marge HTML sont l'une des fonctionnalités qui aident à créer l'espace extérieur des écrans Web HTML. En outre, elles ont différents types tels que marge gauche, marge droite, marge supérieure et marge inférieure ; voici quelques types permettant de décider de la disposition de l'espace hiérarchique sur les pages Web. Chaque type a ses valeurs de longueur possibles.

Syntaxe :

Les marges HTML ont des styles différents en fonction de l'endroit où nous les avons utilisées dans les documents. Si nous utilisons la marge HTML, les documents de style CSS sont utilisés pour les marges.

<html>
<head>
<style>
div
{
Margin:values;
}
</style>
</head>
</html>

Copier après la connexion

Les codes ci-dessus constituent la syntaxe de base dont nous discuterons sur les styles de marge HTML des pages Web. En HTML, le modèle dom est principalement utilisé pour les objets HTML qui fonctionneront sur le back-end des codes. Les marges HTML dépendent de l'élément avec des marges différentes appliquées sur le document de la page Web. Nous pouvons utiliser des fonctions javascript pour définir automatiquement les marges sur les pages Web.

Comment fonctionne la marge HTML à gauche ?

Les marges spécifient une longueur fixe en utilisant les unités de style standard HTML et CSS ; même les valeurs négatives sont autorisées sur les pages Web. Avant cela, nous définirons la propriété margin-left pour qu'elle ait certaines valeurs, que nous attribuerons ou des valeurs par défaut attribuées dans le document. La valeur par défaut est « auto », sinon nous déclarerons les valeurs comme « héritage », « longueur » et « pourcentage ». Chacune des valeurs spécifiées avec un ensemble différent de sous-valeurs basées sur utilisera la propriété margin-left valeurs.

La longueur calculera la longueur ou la longueur fixe des unités CSS. Nous calculons un pourcentage de la largeur et de la hauteur en fonction des blocs HTML. Ce champ autorise également des valeurs négatives. Si supposons que margin ait un attribut de valeur supérieure, le navigateur de l'utilisateur prendra la valeur en pourcentage de la largeur ; il ne précisera pas la hauteur des blocs.

Le navigateur de l'utilisateur calculera automatiquement la valeur de la marge gauche ; cela dépend de l'espace disponible dans la zone extérieure du document ou des pages Web. La valeur d'héritage est principalement utilisée pour la relation parent-enfant du contenu HTML ; il spécifie la largeur de la propriété margin-left avec des valeurs. Lors du calcul de la hauteur et de la largeur des éléments HTML dans les pages Web, nous n'incluons généralement pas les marges pour ce calcul ; nous incluons d'autres éléments HTML comme le remplissage, d'autres zones de contenu, les bordures, etc. Calculez uniquement l'espace disponible de la propriété margin-size de l'élément HTML du document.

Supposons que nous déclarions deux ensembles de marges dans le code HTML qui entrent en collision. Par exemple, nous attribuons un bloc avec une marge droite et une virgule flottante uniquement à droite et un autre bloc avec une marge gauche identique à sa virgule flottante. Le point de marge le plus élevé reste inchangé et ne se déplace pas vers des valeurs plus petites. Dans ce cas, la plus petite zone de marge du bloc s'effondre et peut ne pas s'afficher correctement sur les pages Web, voire disparaître des écrans Web. Généralement, les marges sont transparentes.

Nous utilisons margin comme propriété abrégée pour spécifier la largeur au lieu d'utiliser d'autres spécifications de marge dans les codes de cluster. Cette approche simplifie la lecture des codes dans les espaces développeurs. Parfois, nous pouvons définir des valeurs de marge inférieure comme dans d'autres types de marge. Par exemple, nous différencions une classe d’une autre dans les styles CSS. Nous pouvons spécifier les valeurs de longueur possibles de chaque propriété partout où nous utilisons dans la balise HTML la valeur de longueur des éléments est égale et se rapporte à la hauteur des polices de texte et des polices d'éléments.

Lors de l'ajout d'un objet à une page Web dans IE 4 ou versions ultérieures, la valeur de marge devient absolue dans les documents HTML, plutôt que de supposer une valeur par défaut d'IE version 3 pour les marges des objets en mode de compatibilité lors de l'utilisation d'un navigateur. La valeur de la propriété margin n'est pas prise en charge dans les éléments de tableau HTML et objets dans IE 4, mais cela fonctionnera dans IE 3. Si nous appliquons les valeurs de marge dans les cellules du tableau en utilisant

balises dans les versions IE 4.

Exemples de marge HTML à gauche

Vous trouverez ci-dessous des exemples de marge gauche HTML :

Exemple n°1

Code :

<html>
<head>
<style>
{
margin: 2;
}
div {
width: 210px;
height: 130px;
background:green;
border-radius: 13px;
}
.sample {
background-color: green;
margin-left: 3%;
}
.sample1 {
background-color: yelllow;
}
.sample2 {
background-color: solid green;
margin-left: -13%;
}
</style>
</head>
<body>
<div id="sample2">
<marquee> Welcome To My Domain</marquee>
</div>
</body>
</html>

Copier après la connexion

Sortie :

Marge gauche HTML

Exemple n°2

Code :

<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<p>
<marquee>Welcome To My Domain</marquee>
</p>
</div>
</html>

Copier après la connexion

Sortie :

Marge gauche HTML

Exemple #3

Code :

<html>
<head>
<style>
#sample {
width: 120%;
}
table, td, th {
border: 3px solid green;
}
table {
width: 212px;
float: left;
margin: 23px 42px;
}
</style>
</head>
<div id="sample">
<table>
<tr>
<th>Mobile Number</th>
<th>Name</th>
</tr>
<tr>
<td>8220244056</td>
<td>Siva</td>
</tr>
<tr>
<td>9075854876</td>
<td>Raman</td>
</tr>
</table>
<button type="button" onclick="samples()">Set margin</button>
</div>
<script>
function samples() {
document.getElementById("sample").style.margin-left = "11px 23px 34px 47px";
}
</script>
</html>

Copier après la connexion

Sortie :

Marge gauche HTML

Les trois exemples ci-dessus donneront trois utilisations différentes des propriétés margin ; le premier exemple utilise la propriété margin essentielle pour le style CSS et HTML. Le deuxième exemple crée des tableaux HTML et définit les valeurs de la propriété margin-left de la page Web. Le dernier exemple suit le même processus, mais JavaScript définit automatiquement les valeurs de marge.

Conclusion

En HTML, nous avons vu le type de propriété margin comme margin-left ; sur cette base, nous avons modifié les tableaux HTML, les images et les vidéos ; également, nous alignerons et définirons la mise en page avec marge gauche dans les documents HTML. Certains éléments ne prennent pas en charge HTML5 dans la compatibilité des navigateurs.

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!