Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Diseño CSS El Modelo de Caja CSS Relleno, Bordes y Márgenes

Alexis Borquez
Alexis Borquez
4.895 Puntos
Publicado por Alexis Borquez
Alexis Borquez
4.895 Puntos

¿cómo puedo hacerlo bien?

me pide que le dé al encabezado un borde inferior sólido naranja de 10px de ancho

style.css 
/* Completa el desafío escribiendo CSS a continuación */
header{
  padding-top: 20px;
  relleno-inferior: 25px;
  border-bottom: solid orange 10px

}
.introducción{
  relleno: 1rem;
}
pie de página{
 margin-top: 50px;
}
.destacado{
 border: 2px dotted gris claro;
}
index.html 
<!DOCTYPE html>
<html lang=es>
<head>
  <meta charset=UTF-8>
  <meta name=viewport contenido=width=device-width, initial-scale=1>
  <title>Blog de Diane la desarrolladora</title>
  <link rel=stylesheet href=page.css>
  <link rel=stylesheet href=style.css>
</head>
<body>
  <header>
    <div id=logo>Blog de Diane la desarrolladora</div>
  </header>
  <article>
    <section class=intro>
      <h1>¡El veredicto está en! ¡El diseño CSS es excelente!</h1>
      <p>He estado trabajando con CSS durante un tiempo, y tengo que decir que es bastante increíble. Me encanta poder separar el contenido de la presentación y mantener todos mis estilos en una hoja de estilos externa.</p>
      <p>He tenido un buen dominio de los conceptos básicos durante un tiempo, pero necesitaba aprender más sobre cómo controlar el diseño con CSS. Comprender el diseño CSS significaba primero explorar las partes del modelo de caja CSS.</p>
    </section>
    <section class=destacado>
      <h2>El Modelo de Caja CSS</h2>
      <p>Hay muchos recursos excelentes en línea para ayudarte a aprender el Modelo de Caja CSS. Me gusta el artículo de CSS Tricks <a href=https://css-tricks.com/the-css-box-model/ target=_blank>El Modelo de Caja CSS</a> de Chris Coyier. Para citar al autor:</p>
      <blockquote>Con el riesgo de repetirme demasiado: <strong>cada elemento en el diseño web es una caja rectangular.</strong></blockquote>
      <p>¡Así es! Cada elemento HTML es considerado por el navegador como una caja rectangular.</p>
      <p>El modelo de caja CSS consta de cuatro propiedades: contenido, relleno, borde y margen. He incluido un gráfico del artículo de Coyier para ilustrar este principio.</p>
      <p class=clear>Es bastante fácil entender la parte de Contenido del modelo de caja. El contenido es lo que consta tu HTML. Podría ser un párrafo lleno de texto, una lista con viñetas o una imagen.</p>
      <p>Los desarrolladores principiantes pueden tener algunos problemas para mantener las otras partes del modelo de caja claras, así que examinémoslas una por una.</p>
    </section>
    <pie de página>©2020 Developer Diane.</pie de página>
</body>
</html>

2 Respuestas

Travis Alstrand
sello-máscara
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Revisor de Proyectos Treehouse
Travis Alstrand
.a{fill-rule:evenodd;}techdegree seal-36
Travis Alstrand
Revisor de Proyectos Treehouse

Hola de nuevo Alexis Borquez ! 👋

En tu border-bottom style, actualmente te falta el punto y coma ; al final de la línea. Hay algo extraño sucediendo, y creo que se debe al resto de los estilos agregados a continuación. Si estás en el segundo paso del desafío, en este punto solo deberías tener los siguientes estilos:

header {
  padding-top: 20px;
  relleno-inferior: 25px;
  border-bottom: solid orange 10px;
}

Esto funciona para mí. Querrás evitar agregar código que no se solicite en estos desafíos, ya que las pruebas que se ejecutan en el backend son extremadamente específicas en lo que buscan. El código adicional a veces puede causar un error en la prueba.

Espero que esto te ayude.

Steven Parker
Steven Parker
244 163 puntos
Steven Parker
Steven Parker
244 163 puntos

Los puntos y comas solo son obligatorios entre las configuraciones de propiedad/valor, son opcionales después de la última. Así que esa parte de tu código está bien como está, aunque se considera una buena práctica colocar un punto y coma después de la última también. Esto hace que sea más simple si tú (u otra persona) deseas agregar más líneas de propiedad/valor a la regla más tarde.

El problema real aquí es que las instrucciones para la tarea del desafío final te dicen que le des al elemento en .featured regla un top border, pero el nombre de la propiedad "border" por sí solo agrega bordes a los cuatro lados. Usa el nombre de propiedad correcto solo para el borde superior y aprobarás el desafío.