<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Propiedad Display en CSS</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f8fafc;
      padding: 25px;
      color: #0f172a;
    }

    /* Elementos en bloque */
    .caja-bloque {
      display: block;
      background-color: #dbeafe;
      border: 1px solid #93c5fd;
      color: #1e40af;
      padding: 10px;
      margin-bottom: 8px;
      border-radius: 6px;
    }

    /* Elementos inline-block */
    .caja-inline-block {
      display: inline-block;
      width: 140px;
      height: 70px;
      background-color: #fef3c7;
      border: 1px solid #fcd34d;
      color: #92400e;
      padding: 10px;
      margin-right: 10px;
      border-radius: 6px;
      vertical-align: top;
      text-align: center;
      font-weight: bold;
    }

    /* Botón para alternar visibilidad */
    .btn-control {
      background: #0284c7;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      margin-bottom: 12px;
    }
  </style>
</head>
<body>

  <h3>1. Elementos en Bloque (display: block)</h3>
  <div class="caja-bloque">Bloque A: Ocupa todo el ancho horizontal disponible</div>
  <div class="caja-bloque">Bloque B: Automáticamente salta a la siguiente línea</div>

  <h3>2. Elementos en Línea-Bloque (display: inline-block)</h3>
  <div>
    <div class="caja-inline-block">Caja 1 (140x70px)</div>
    <div class="caja-inline-block">Caja 2 (140x70px)</div>
    <div id="cajaOcultable" class="caja-inline-block" style="background: #fee2e2; border-color: #fca5a5; color: #991b1b;">
      Caja 3 (Ocultable)
    </div>
  </div>

  <div style="margin-top: 20px;">
    <button class="btn-control" onclick="alternarDisplay()">
      Alternar con display: none
    </button>
    <button class="btn-control" style="background: #475569;" onclick="alternarVisibility()">
      Alternar con visibility: hidden
    </button>
  </div>

  <script>
    const caja = document.getElementById('cajaOcultable');
    function alternarDisplay() {
      caja.style.visibility = 'visible';
      caja.style.display = (caja.style.display === 'none') ? 'inline-block' : 'none';
    }
    function alternarVisibility() {
      caja.style.display = 'inline-block';
      caja.style.visibility = (caja.style.visibility === 'hidden') ? 'visible' : 'hidden';
    }
  </script>

</body>
</html>