2

Estoy comenzando con CSS, leyendo un manual.

Mi problema es el siguiente, establezco un margen global de 0px, luego tengo un div con 4 párrafos dentro, y solo a uno por medio de su clase le asigno un margen de 10px, luego fuera del div coloco otro párrafo con la misma clase que este último, al mostrar la página en Firefox se ve que el div tiene un espaciado previo y no entiendo como surgió ni cómo sacarlo.

Intente establecer un espaciado de margen 0 para ese div en el archivo CSS y no cambio la situación. Acompaño los códigos:

pseudoclases.html

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="pseudoclases.css">
</head>
<body>
<div id="wrapper">
<p class="mitexto1">Mi texto1</p>
<p class="mitexto2">Mi texto2</p>
<p class="mitexto3">Mi texto3</p>
<p class="mitexto4">Mi texto4</p>
</div>
<p class="mitexto2">Mi texto2 fuera del div</p>
</body>
</html>

pseudoclases.css

p:nth-child(2){
    background: greenyellow;
}
*{
    margin: 0px;
}

p:nth-child(odd){
    background: orange;
}
p:nth-child(even){
    background: blue;
}
:not(.mitexto2){
    margin: 10px;
}
div > p.mitexto2{
    background: green;
}

Agradezco cualquier ayudar y gracias por la atención.

Diablo
  • 6,417
  • 2
  • 21
  • 40
Aprendiz de programador
  • 23
  • 5
  • 2
    Con esta línea ```:not(.mitexto2)``` estas estableciendo un ```margin: 10px``` a cualquier elemento que **NO** sea ```.mitexto2```, luego esta línea debería ir al principio ```* { margin: 0px; }``` para establecer el margen por defecto a 0 en todo el documento. – Diablo Apr 12 '22 at 13:45
  • 1
    Perdón, que distracción la mia. Te agradezco mucho la respuesta. Pregunta respondida. Voy a averiguar como cerrar la prefgunta. Gracias por su tiempo. – Aprendiz de programador Apr 12 '22 at 14:23
  • Ahora te dejo una respuesta y así lo puedes cerrar. Si estas aprendiendo, aquí tienes muchos ejemplos de donde puedes aprender: https://www.w3schools.com/howto/default.asp, saludos – Diablo Apr 12 '22 at 14:30
  • Gracias @DBE, me fue muy útil tu información. Perdón pero no encuentro en la documentacion como cerrar la pregunta. Apenas lo encuetre la cierro. Gracias por tu tiempo. – Aprendiz de programador Apr 12 '22 at 14:33
  • Te acabo de dejar una respuesta, arriba de mi respuesta veras un **0** y un triángulo hacia arriba o hacia bajo, si aprietas hacia arriba, votas la pregunta a favor, hacia bajo sería negativo, y si piensa que te ayudo mi respuesta, veras un **V** también, si le das clic, estarías aceptando mi respuesta y cierras tu pregunta, te aconsejo que hagas un recorrido del sitio, y así aprendes como usar el sitio, un saludo amigo. – Diablo Apr 12 '22 at 14:55
  • puedes añadir una imagen de como queda y dale bordes a todo para ver cada caja sus limites. gracias – FranyxD Apr 12 '22 at 15:53
  • Gracias @DBE no entenida porque no podia puntuar y luego de seguir tu onsejo descubri que tenia que esperar al menos 15miutos desde mi publicación para poder hacer. Gracs por tu ayuda y paciencia. – Aprendiz de programador Apr 14 '22 at 10:42
  • Gracias FranyxD, muy buena idea. Lo probaré. – Aprendiz de programador Apr 14 '22 at 10:44

1 Answers1

2

Estas un poco confuso de cómo usar la pseudoclase :not() ya que no selecciona dicho elemento, si no selecciona cualquier elemento que no se llama en este caso .mitexto2, y por eso estas añadiendo un margin de 10px a todos tus elementos que no se llaman así.

Si miramos el manual, nos dice:

Selecciona cualquier elemento que NO sea un párrafo

:not(p) {
  color: blue;
}

Otra cosa importante tener en cuenta en tu CSS * { margin: 0px; } deberia ir al principio de tu documento, para que este coja efecto sobre todo tu hojas de estilos.

Personalmente lo reinicio de esta forma:

estilos.css

/* Reseteo por defecto */

*,
*:before,
*:after {
 border: 0;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
}

article,
div,
figcaption,
footer,
header,
nav,
section,
pre,
video {
 display: block;
}
/* ¡importante para diseño responsivo! asi se adopta automatica a dimesion pantalla */
audio,
iframe,
img,
video {
 max-width: 100%;
}

html,
body {
 height: 100%;
 width: 100%;
 max-width: 100%;
}

/* Añades estilos por defecto a todo el cuerpo */
body {
 color: #3C3B37;
 font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 font-weight: 400;
 font-size: 16px;
 overflow-x: hidden;
}

/* Sigues con tu CSS */

p:nth-child(2){
 background: greenyellow;
}
/* etc ...*/

Si estas aprendiendo te dejo un enlace con mucho ejemplo buenos, que te pueden ayudar a orientarte y coger más experiencia: W3Schools How To

También tienes interesantes respuestas en SOes: Guías de estilo oficiales para HTML, CSS y Javascript

Diablo
  • 6,417
  • 2
  • 21
  • 40
  • 1
    Gracias por contestar. Toda esta información me esta siendo muy útil. Tengo mucho que aprender y me esto me ayuda muchu. Gracias. – Aprendiz de programador Apr 14 '22 at 10:38
  • De nada amigo, me alegro de que te sirvió, que mejor que ayudar. Aquí te dejo otra respuesta que di, que también es interesante para aprender, crear una estructura con **GRID**: https://es.stackoverflow.com/questions/520150/como-puedo-hacer-con-css-que-mi-header-en-displayflex-con-3-div-hijos-no-se/520734#520734. Puedes aceptar esta respuesta si piensa que te soluciono el problema dando clic en la **V** donde se vota, y se pondrá verde, en la parte de arriba de mi pregunta, y así queda cerrada tu pregunta, un saludo. – Diablo Apr 14 '22 at 11:16
  • Gracias amigo por tu pronta respuesta y por estar siempre predispuesto a ayudar espero poder retribuirtelo en algún momento. Te mando un abrazo. Y decidí pausar el libro q estoy leyendo y segur los manuales que dejaste en ese post. Muy valiosa toda la info que das. – Aprendiz de programador Apr 15 '22 at 10:34
  • Me alegro amigo, poco a poco cogerás experiencia. Céntrate primero en **HTML** y **CSS** así aprendes el *Frontend* y después si te quieres profundizar más ya aprendes algún idioma de programación que te guste (*backend*), ya que hay muchos. Yo aprendí así, icé un máster, libros, etc. y realmente donde más aprendí fue gratis con videos tutoriales que hay muchos y los manuales. – Diablo Apr 15 '22 at 12:18
  • 1
    Gracias por todos tus consejos. En estos momentos estos haciendo como comentas leyendo libros y viendo videos. – Aprendiz de programador Apr 18 '22 at 01:07