Propriété css inset

Dans cet article on va voir :

inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start

Définition et utilisation da la propriété css inset

La propriété inset définit la distance entre un élément et l'élément parent.
La propriété CSS inset est un raccourci qui correspond aux propriétés top, right, bottom et/ou left. Elle possède la même syntaxe à valeurs multiples que la propriété margin.

inset: <top> <right> <bottom> <left>;

Chaque paramètre dans cette syntaxe peut être spécifié en utilisant une valeur numérique suivie d'une unité de mesure (px, em, etc.) ou un pourcentage qui spécifie la distance en pourcentage par rapport à la taille de l'élément parent sur l'axe correspondant, ou en utilisant l'un des mots-clés suivants:

auto: le navigateur calcule la valeur en fonction de l'élément.
initial: la valeur par défaut du navigateur est utilisée.
inherit: la valeur est héritée de l'élément parent.
Voici un exemple d'utilisation de la propriété inset:

Exemple Copier le code

div {
  inset: 10px 5px 15px 20px;
}

Cet exemple créera un bord intérieur de 10 pixels en haut, 5 pixels à droite, 15 pixels en bas et 20 pixels à gauche sur l'élément div. Vous pouvez également utiliser la syntaxe raccourcie inset pour spécifier des valeurs identiques pour tous les côtés du bord intérieur:

Exemple Copier le code

div {
  inset: 10px; /* bord intérieur de 10 pixels sur tous les côtés */
}

Valeurs par défaut	auto
Inherited:	non
Animable :	oui En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.inset="10px 15px 10px 15px"

Voici un exemple de page HTML avec du CSS utilisant la propriété inset:

Exemple Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
  <title>La propriété css inset</title>
   <style>
div {
  background-color: yellow;
  width: 150px;
  height: 120px;
  position: relative;
}

.exampleText {
  writing-mode: sideways-rl;
  position: absolute;
  inset: 20px 40px 30px 10px;
  background-color: #c8c800;
}
</style>
  </head>
  <body>
  <div>
  <span class="exampleText">Exemple texte</span>
</div>
  </body>
</html>

Dans cet exemple l'élément <span> est un conteneur en ligne utilisé pour appliquer un style à une partie du texte. Dans ce cas, il a une couleur de fond jaune et une marge extérieur spécifié avec la propriété inset. La propriété position: absolute permet de positionner l'élément de manière absolue par rapport à son parent (l'élément div).

Définition et utilisation da la propriété css inset-block

La propriété inset-block-end définit la distance entre l'extrémité d'un élément et l'élément parent dans la direction du bloc.

Remarque : pour que cette propriété prenne effet, la propriété position doit être spécifiée.

Les propriétés CSS inset-inline et inset-block sont très similaires aux propriétés CSS top, bottom, left et right, mais les propriétés inset-block et inset-inline dépendent des directions de bloc et de ligne.

Remarque : la propriété CSS connexe writing-mode définit la direction du bloc. Elle affecte l'emplacement du début et de la fin d'un bloc et le résultat de la propriété inset-block-end. Pour les pages en langues oxydentales( anglais, français, espagnole....), le sens du bloc est vers le bas et le sens de l'insertion est de gauche à droite.

La Syntaxe CSS
La syntaxe de cette propriété est la suivante:

inset-block: valeur|valeur;

Le paramétre valeur peut prondre les valeurs:

auto Par défaut. La distance d'insertion par défaut de l'élément.
length Spécifie la distance en px, pt, cm, etc. Les valeurs négatives sont autorisées.
% Spécifie la distance en pourcentage par rapport à la taille de l'élément parent sur l'axe correspondant.

Définir la distance de l'élément parent par rapport à un élément div positionné dans la direction du bloc :

Exemple Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
  <title>La propriété css inset-block</title>
<style>
#parentDIV {
  position: relative;
  height: 250px;
  width: 60%;
}

#myDIV {
  position: absolute;
  background-color: lightblue;
  inset-block: 10px 50px;
}

div {
  border: solid black 1px;
}
</style>
</head>
<body>

<h1>La propriété css inset-block </h1>

<div id="parentDIV">
  <div id="myDIV">
    <p>Ce DIV a une taille définie par la distance de 10 pixels à l'élément DIV parent depuis le début du bloc, et 50 pixels de distance au parent depuis la fin du bloc.</p>
  </div>
  </body>
</html>

Définition et utilisation da la propriété css inset-block-end

La propriété inset-block-end définit la distance entre la fin d'un élément et l'élément parent dans la direction du bloc.

La propriété inset-block-end en CSS est utilisée pour définir la distance de fin de bloc logique, et non pour le décalage en ligne ou le bloc logique. Cette propriété peut s'appliquer à n'importe quelle propriété de mode d'écriture.

La Syntaxe CSS
La syntaxe de cette propriété est la suivante:

inset-block-end : longueur | pourcentage | auto | inherit | initial | unset ;

Valeurs de la propriété :

longueur : Il définit une valeur fixe définie en px, cm, pt etc. Les valeurs négatives sont également autorisées. Sa valeur par défaut est 0px.
pourcentage : C'est la même chose que length mais elle est définie en termes de pourcentage de la taille de la fenêtre.
auto : Il est utilisé lorsqu'on souhaite que le navigateur détermine l'inset-block-end.
initial : Il est utilisé pour définir la valeur de la propriété inset-block-end à sa valeur par défaut.
inherit : Utilisé lorsqu'on souhaite que l'élément hérite la propriété inset-block-end de son élément parent.
unset : On l'utilise pour annuler la propriété inset-block-end par défaut.

L'exemple ci-dessous illustre la propriété inset-block-end en CSS :

Exemple Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>CSS la propriété inset-block-end </title>
    <style>
        h1 {
            color: green;
        }
        div {
            background-color: green;
            width: 250px;
			border:solid 1px black;
			
        }
        .one {
            position: relative;
            inset-block-end: 30px;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <center>
        <h1>CSS la propriété inset-block-end</h1>
        <b>CSS inset-block-end </b>
        <br><br>
        <div>
            <p class="one">
                Exemples illustrant la propriété 
            </p>
        </div>
    </center>
</body>
</html>

Définition et utilisation da la propriété css inset-block-start

La propriété inset-block-start définit la distance entre le début d'un élément et l'élément parent dans la direction du bloc.

La Syntaxe CSS
La syntaxe de cette propriété est la suivante:

inset-block-start : longueur | pourcentage | auto | inherit | initial | unset ;

la propriété css inset-block-start prend les mêmes valeur que la propriété css inset-block-end vus ci-dessus.

La propriété inset-block-start est utilisée pour définir le décalage de début de bloc logique, et non pour le décalage en ligne ou le bloc logique. Cette propriété peut s'appliquer à toute propriété de mode d'écriture.

Voici un exemple dans le quel nous avons pris le même exemple vu ci-dessus en modifiant le css comme suit:

Exemple Copier le code

        .one {
            position: relative;
            inset-block-start: 30px;
            background-color: cyan;
        }

Définition et utilisation da la propriété css inset-inline

La propriété inset-inline définit la distance entre un élément et l'élément parent dans le sens de la ligne.

Remarque : pour que cette propriété prenne effet, la propriété position doit être spécifiée.

La propriété inset-inline est une propriété raccourcie pour les propriétés : inset-inline-start et inset-inline-end

Syntaxe générale:
La syntaxe de cette propriété est la suivante:

inset-inline: longueur|pourcentage|auto|inherit|initial|unset;

Les valeurs de la propriété inset-inline peuvent être définies de différentes manières :

Si la propriété inset-inline a deux valeurs :

inset-inline : 10px 50px ;
la distance au début est de 10px
la distance à la fin est de 50px

Si la propriété inset-inline a une seule valeur :

inset-inline : 10px ; la distance au début et celle à la fin ont la même valeur de 10px .

Remarque : les propriétés CSS connexes writing-mode et direction définissent la direction de la ligne. Cela affecte l'emplacement du début et de la fin d'une ligne et le résultat de la propriété inset-inline. Pour les pages en langues oxydentales( anglais, français, espagnole....), le sens de la ligne est de gauche à droite et le sens du bloc est vers le bas.

Valeurs de la propriété :

longueur : Il définit une valeur fixe définie en px, cm, pt etc. Les valeurs négatives sont autorisées. Sa valeur par défaut est 0px.
pourcentage : C'est la même chose que la longueur mais elle est définie en termes de pourcentage de la taille de la fenêtre.
auto : C'est la valeur par défaut et elle est utilisée lorsque le navigateur détermine la taille du bloc.
initial : Il est utilisé pour définir la valeur de la propriété inset-inline à sa valeur par défaut. inherit : On l'utilise quand on veut que l'élément hérite la propriété inset-inline de son parent comme étant la sienne.
unset : Cette propriété est utilisée pour annuler la valeur par défaut de la propriété inset-inline.

Exemple Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>CSS la propriété inset-inline</title>
<style>
h1{color:#003668;}
#parentDIV {
  position: relative;
  height: 250px;
  width: 60%;
  border: solid black 1px;
}

#myDIV {
  position: absolute;
  background-color: lightblue;
  height: 100%;
  inset-inline: 10px 50px;
}
</style>
</head>
<body>

<h1>CSS la propriété inset-inline</h1>

<div id="parentDIV">
  <div id="myDIV">
    <p>Ce DIV a une taille définie par la distance de 10 pixels par rapport à l'élément DIV parent depuis le début de l'élément, et la distance de 50 pixels par rapport au parent depuis la fin de l'élément, dans le sens inline.</p>.
  </div>
</div>
</body>
</html>

Définition et utilisation da la propriété css inset-inline-end

La propriété inset-inline-end définit la distance entre la fin d'un élément et l'élément parent dans le sens de la ligne.

La propriété inset-inline-end est une propriété intégrée à CSS. Elle est utilisée pour définir le décalage logique de fin de ligne, et non pour le décalage de bloc ou le bloc logique. Cette propriété peut s'appliquer à n'importe quelle propriété de mode d'écriture.

La Syntaxe CSS
La syntaxe de cette propriété est la suivante:

inset-inline-end : longueur|pourcentage|auto|inherit|initial|unset ;

Valeurs de la propriété :

longueur : Elle définit une valeur fixe définie en px, cm, pt etc. Les valeurs négatives sont autorisées. Sa valeur par défaut est 0px.
pourcentage : Il définit la longueur en termes de pourcentage de la taille de la fenêtre.
auto : Il est utilisé lorsqu'on souhaite que le navigateur détermine l'inset-inline-end.
initial : Il est utilisé pour définir la valeur de la propriété inset-inline-end à sa valeur par défaut.
inherit : On l'utilise quand on veut que l'élément hérite de la propriété inset-inline-end de son parent comme étant la sienne.
unset : Cette option est utilisée pour annuler la valeur par défaut de la propriété inset-inline-end.

L'exemple ci-dessous illustre la propriété inset-inline-end en CSS :

Exemple Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>CSS la propriété inset-inline-end</title>
<style>
h1{color:#003668;}
#parentDIV {
  position: relative;
  height: 250px;
  width: 60%;
  border: solid black 1px;
}

#myDIV {
  position: absolute;
  background-color: lightblue;
  height: 100%;
  inset-inline-end: 20px;
}
</style>
</head>
<body>

<h1>CSS la propriété inset-inline-end </h1>

<div id="parentDIV">
  <div id="myDIV">
    <p>Ce DIV a une taille définie par la distance de 20 pixels par rapport au parent depuis la fin de l'élément, dans le sens inline</p>
  </div>
</div>
</body>
</html>

Définition et utilisation da la propriété css inset-inline-start

La propriété inset-inline-start définit la distance entre le début d'un élément et l'élément parent dans le sens de la ligne.

La propriété inset-inline-start en CSS est utilisée pour définir le décalage logique de début de ligne, et non pour le décalage de bloc ou le bloc logique. Cette propriété peut s'appliquer à toute propriété de mode d'écriture.

Syntaxe générale:
La syntaxe de cette propriété est la suivante:

inset-inline-start : longueur|pourcentage|auto|inherit|initial|unset ;

Valeurs de la propriété :

longueur : Elle définit une valeur fixe définie en px, cm, pt etc. Les valeurs négatives sont autorisées. Sa valeur par défaut est 0px.
pourcentage : C'est la même chose que length mais elle définit en termes de pourcentage de la taille de la fenêtre. auto : Il est utilisé lorsqu'on souhaite que le navigateur détermine la taille du bloc.
initial : Il est utilisé pour définir la valeur de la propriété inset-inline-start à sa valeur par défaut.
inherit : Ce paramètre est utilisé lorsqu'on souhaite que l'élément hérite de la propriété inset-inline-start de son élément parent.
unset : Il est utilisé pour annuler la valeur par défaut de la propriété inset-inline-start.

L'exemple ci-dessous illustre la propriété inset-inline-start en CSS :

Exemple Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
<title>CSS la propriété inset-inline-start</title>
<style>
h1{color:#003668;}
#parentDIV {
  position: relative;
  height: 250px;
  width: 60%;
  border: solid black 1px;
}

#myDIV {
  position: absolute;
  background-color: lightblue;
  height: 100%;
  inset-inline-start: 20px;
}
</style>
</head>
<body>

<h1>CSS la propriété inset-inline-start </h1>

<div id="parentDIV">
  <div id="myDIV">
    <p>Ce DIV a une taille définie par la distance de 20 pixels par rapport au parent depuis le début de l'élément, dans le sens inline</p>
  </div>
</div>
</body>
</html>