CSS: Agregar caja con borde border: 1px solid #ccc; padding: 10px;
📝 Uso
Este template muestra cómo crear una caja con borde y relleno usando las propiedades CSS border: 1px solid #ccc; y padding: 10px;.
📘 Explicación
El código CSS anterior usa border: 1px solid #ccc; para agregar un borde y padding: 10px; para agregar relleno dentro de la caja. También se establecen el ancho y el margen para centrar la caja en la página.
🔹 Código Parcial
Esta caja tiene aplicado un borde y relleno.
<div class="demo-area">
<p>Esta caja tiene aplicado un borde y relleno.</p>
</div>
<style>
.demo-area {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
width: 300px;
margin: 20px auto;
}
</style>
💻 Código HTML Completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>CSS: Agregar caja con borde border: 1px solid #ccc; padding: 10px;</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.demo-area {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
width: 300px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="demo-area">
<p>Esta caja tiene aplicado un borde y relleno.</p>
</div>
</body>
</html>
💻 Código Funcional Completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>CSS: Agregar caja con borde border: 1px solid #ccc; padding: 10px;</title>
<link rel="stylesheet" href="/assets/css/template-common.css?v=1">
<style>
.demo-area {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
width: 300px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="demo-area">
<p>Esta caja tiene aplicado un borde y relleno.</p>
</div>
</body>
</html>
📌 Uso práctico de cajas con bordes
Las cajas con bordes simples son un elemento básico del diseño web y se pueden utilizar en una gran variedad de situaciones. La combinación de border y padding es ideal para separar visualmente el contenido y proporcionar un espaciado adecuado.
🎨 Variaciones de diseño
Cambiar el estilo del borde puede generar una impresión completamente diferente. Por ejemplo, border: 2px dashed #999; crea un borde punteado, mientras que border: 3px double #333; crea un borde doble. Agregar border-radius: 8px; da una apariencia más suave y amigable con esquinas redondeadas.
📱 Consejos para diseño responsivo
Para dispositivos móviles, se recomienda reducir el padding, por ejemplo con padding: 5px;. Usando media queries como @media (max-width: 768px) { .demo-area { width: 90%; padding: 8px; } } se logra una visualización óptima en pantallas pequeñas.
Las cajas con bordes son útiles para mostrar advertencias, información adicional, grupos de campos en formularios o descripciones de productos. Si se añade un color de fondo como background-color: #f9f9f9;, se puede resaltar aún más el contenido.
Es importante mantener un estilo de borde coherente en todo el sitio web. Unificar colores, grosores y esquinas redondeadas aporta una apariencia profesional. Además, se puede agregar una sombra como box-shadow: 0 2px 4px rgba(0,0,0,0.1); para dar profundidad y destacar el contenido.