<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Exemplo de Box Model - TI</title>
    <style>
        /* Estilizando o corpo para melhor visualização */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            padding-top: 50px;
        }

        /* A "Caixa" principal que demonstra o conceito */
        .caixa-exemplo {
            /* 1. CONTENT: Definimos a largura do conteúdo interno */
            width: 400px;
            height: 250px;
            background-color: white; /* Cor do fundo do conteúdo */

            /* 2. PADDING: Espaço interno entre o conteúdo e a borda */
            /* Isso evita que o texto "sufoque" nas bordas */
            padding: 20px;

            /* 3. BORDER: A linha que envolve o preenchimento */
            border: 20px solid #797979; /* Borda azul sólida */

            /* 4. MARGIN: Espaço externo que afasta esta caixa de outras */
            margin: 20px;

            box-shadow: 20px 20px 15px rgba(69, 1, 1, 0.596);
        }

        .text-right {
            text-align: right;
        }

        .text-left {
            text-align: left;
        }

        .text-center {
            text-align: center;
        }

        /* Classe auxiliar para destacar o texto interno */
        .formatacao-div { 
            background-color: rgb(41, 205, 134);           
            padding: 10px;
            height:90%;
        }
        
        .texto-branco {
            color:#ffff;
        }

        .texto-amarelo {
            color: yellow;
        }
    </style>
</head>
<body>
    <div class="caixa-exemplo">
        DIV 1
        <div class="formatacao-div texto-branco">
            <strong>DIV 2</strong>
            <p>
                Aqui é onde os dados <span class="texto-amarelo"><strong>(texto/imagem)</strong></span> residem.
            </p>
        </div>
    </div> 

    <div class="caixa-exemplo">
        DIV 1
        <div class="conteudo-texto texto-branco">
            <strong>DIV 2</strong>
            <p>
                Aqui É onde os dados (texto/imagem) residem.
            </p>
        </div>
    </div> 
</body>
</html>