1

Estoy intentando hacer una seccion de noticias. Lo que intento es que cada noticia con su respectivo titulo, cuerpo e imagen tenga su propio fondo de color. El problema es que me queda un espacio en blanco entre el titulo y el cuerpo y no sabría como ingresar la imagen al mismo fondo donde esta el titulo y cuerpo. No se como separar ambos codigos en stackoverflow, espero se entienda.

HTML

<h2 id="titulo_noticia1">Más del 21% de las especies de reptiles está en peligro de extinción</h2>
</p>

<p id="cuerpo_noticia1">
    Una amplia investigación en la que se ha realizado la primera evaluación integral del riesgo de extinción de reptiles en la Lista Roja de Especies Amenazadas de la UICN ha encontrado que más de una de cada cinco especies (al menos el 21%) de reptiles del mundo corren el peligro de extinguirse.
    Los investigadores han comprobado que las estrategias para proteger a mamíferos, aves y anfibios amenazados ofrecen más probabilidades de las esperadas para beneficiar también a muchos de los reptiles en peligro.
</p>
    <p>
<img src="imagenes/noticia1.jpg" width="300" height="200" alt="Imagen de reptil" id="noticia1">
    </p>

CSS

#titulo_noticia1{
    font-family: 'Abel', sans-serif;
    background-color: mediumpurple;
    
}

#cuerpo_noticia1{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background-color: mediumpurple;
    
}

#noticia1{
    background-color: mediumpurple;
}
7
  • Los navegadores ponen algunos estilos por defecto. Busca reset css en internet y aplicalo a tu documento css el 3 may. 2022 a las 1:10
  • 1
    te recomiendo como buenas practicas css, definir a todos los elementos un margin 0 y padding 0 ( * { margin: 0; padding: 0; } ) para que detalles como este no afecten tu diseño.
    – LexxCh
    el 3 may. 2022 a las 1:17
  • Para lo último que mencionas, puedes insertar tu código en la pregunta como snippet (con el botón que indica <>).
    – padaleiana
    el 3 may. 2022 a las 1:20
  • He editado tu pregunta para mostrar el código que se habia quedado oculto. Cuando usas las tres tildes invertidas para poner código debes hacer un retorno de carro al final e iniciar el código en una nueva línea, sino esa línea desaparece. Aún así, lo mejor en este caso es ponerlo en un snippet, tal como ya te ha indicado @padaleiana, pero eso ya dejo que lo pruebes tu para que lo aprendas.
    – masterguru
    el 3 may. 2022 a las 6:19
  • @HernánGarcia me sirvio tu respuesta! Era empleando el reset. Mil gracias! Podrias ponerla como respuesta asi la marco como solucion? Gracias
    – btmn_ctwmn
    el 3 may. 2022 a las 14:54

1 respuesta 1

2

las etiquetas p y h generan un margen automático, debes eliminarlo

margin: 0px;
padding: 20px;

o bien, comprendes que la etiquetas p son para parrafos y h para titulos y todo debiese estar contenido en una caja llamada div la cual es la que debe aplicarse el color de fondo, pues el color de fondo de un p o un h equivale a un macador de texto, esto trae mas sentido al por que el texto se colorea de forma que quedan espacios en blanco.

Mi sugerencia:

#contenido{
 padding: 20px;
 background-color: mediumpurple;
}
#titulo_noticia1{
 font-family: 'Abel', sans-serif;
}
#cuerpo_noticia1{
 font-family: 'M PLUS Rounded 1c', sans-serif;
}
<div id="contenido">
<p>
<h2 id="titulo_noticia1">Más del 21% de las especies de reptiles está en peligro de extinción</h2>

</p>

<p id="cuerpo_noticia1">
 Una amplia investigación en la que se ha realizado la primera evaluación integral del riesgo de extinción de reptiles en la Lista Roja de Especies Amenazadas de la UICN ha encontrado que más de una de cada cinco especies (al menos el 21%) de reptiles del mundo corren el peligro de extinguirse.
 Los investigadores han comprobado que las estrategias para proteger a mamíferos, aves y anfibios amenazados ofrecen más probabilidades de las esperadas para beneficiar también a muchos de los reptiles en peligro.
</p>
 <p>
<img src="imagenes/noticia1.jpg" width="300" height="200" alt="Imagen de reptil" id="noticia1">
 </p>
 
</div> 

1
  • 1
    He agregado el código que habia quedado escondido en la pregunta (un header tipo H2) y sigue viéndose un espacio. Corrige tu respuesta ahora que tienes todo el escenario para evitar ese espacio.
    – masterguru
    el 3 may. 2022 a las 6:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.