18 - La propriété display (inline-block)

La propriété CSS "display" détermine comment un élément HTML est affiché sur une page web. La valeur "inline-block" permet de définir un élément en ligne tout en conservant la capacité de définir des dimensions et des marges pour cet élément.

Voici comment utiliser la propriété "display: inline-block" :

.button {
        display: inline-block;
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 32px;
        padding-bottom: 32px;
      }

Un exemple complet

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      p {
        background: red;
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 32px;
        padding-bottom: 32px;
        border-radius: 32px;
      }
      .link {
        color: green;
      }
      .button {
        display: inline-block;
        background: blue;
        color: white;
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 32px;
        padding-bottom: 32px;
        border-radius: 32px;
        text-decoration: none;
      }

      .button:hover {
        background: #01016e;
      }
    </style>
  </head>
  <body>
    <h1>Display inline-block</h1>
    <p>Ceci est un paragraphe</p>
    <a class="link" href="#">Ceci est un lien</a>
    <a href="contact.html" class="button">Bouton vers contact</a>
  </body>
</html>