[SOLUCIONADO] Problema con las propiedades del body

Kirguiso · #1 (**permalink**) 20/10/2015, 09:18

A ver si me podéis ayudar. Ya no sé que hacer es muy muy sencillo pero de verdad no sé lo que estoy haciendo mal. Me estoy volviendo loco.

Tengo este HTML

Código HTML:

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>noname</title>
	<link rel="stylesheet" href="prueba.css">
</head>
	<body>
		<p>Hola mundo!</p>
	</body>
</html>

Y este CSS

Código HTML:

*
{
	margin: 0px;
	padding: 0px;
}

*::-moz-selection {	
   background: #dadada;
}

*::selection {
   background: #dadada;
}

body {
	margin: 50px 0px 0px 50px;
	width: 100%;
	background: #FFFEFF;
}

me sale el scroll horizontal y no se me adapta al ancho del navegador.

Si no le pongo margen por la izquierda se me adapta bien y no me sale el scroll.

¿Por qué? Ya no sé que hacer de verdad...

http://www.cssdesk.com/VqEsG

Aquí os lo dejo para que veáis como aparece la barra de scroll.

Mil gracias a todos por vuestra paciencia y ayuda.

AngelKrak · #2 (**permalink**) 20/10/2015, 09:39

amigo el margin, es un margen externo, te va a mover un bloque a la posicion que le estas dando en tal caso el body lo estas moviendo de su posicion original que seria desde 0 con un ancho del 100% al moverlo ese ancho sigue estando pero se va haciendo scroll por que le estas dando margen externo ;)

Kirguiso · #3 (**permalink**) 20/10/2015, 09:45

Ajá, osea, que lo que ocurre es normal, ¿no?

Pero..., entonces, ¿cómo hago para separar todo el body y que no quede pegado a la esquina y que no salga la barra de scroll?

Gracias!

AngelKrak · #4 (**permalink**) 20/10/2015, 11:29

si, es normal amigo ;) si quieres separar el texto, asignale el margin al parrafo, eso hara que se separe solo el parrafo del Body(Pagina) y no saldra scroll ;)

http://codepen.io/AngelKrak/pen/jbYGxK

Kirguiso · #5 (**permalink**) 20/10/2015, 13:07

Anda... eso ya lo había probado y me funcionaba pero... creí que habría algo mal al no funcionarme en el body.

Entonces los margin, para que no ocurra lo que me ha ocurrido, no se le pueden aplicar al body, no?

Y a un div="contenedor " tampoco se le puede aplicar margin para que no ocurra lo del scroll, no?

Y por consiguiente padding tampoco, no?

AngelKrak mil gracias!

pzin · #6 (**permalink**) 20/10/2015, 13:41

Sí le puedes margen. El problema real es que tienes que quitarle el ancho al elemento body.

Es una cuestión de lógica. Si mide 100% y le añades margen, ocupará el 100% más el margen que le pongas.

Lo lógico es no ponerle ancho, así, siendo un elemento en bloque, ocupará todo el espacio disponible (que no es, técnicamente, el 100%, pero sí en la práctica) porque el ancho por defecto de elementos en bloque es auto.

Kirguiso · #7 (**permalink**) 20/10/2015, 13:47

Entonces, al body se le aplica margin pero no width?

Lo siento, soy duro de mollera, pero no me queda muy claro.

Gracias pzin!

pzin · #8 (**permalink**) 20/10/2015, 13:51

Es una mala práctica en sí mismo indicar que body tenga un ancho.

Pero bueno, si fuese cualquier otro elemento, te ocurriría lo mismo. Un elemento de bloque siempre va a ocupar todo el ancho disponible, entonces no tienes porqué ponerle 100% si es eso lo que quieres que ocupe.

Si por el contrario quisieras que tu web no ocupe el 100%, entonces lo ideal sería crear un elemento contenedor para todo el contenido de tu web y trabajar ahí el ancho. Pero, como digo, en este caso en concreto parece que no te haga falta sino no indicar el ancho.

pzin · #9 (**permalink**) 20/10/2015, 13:55

A ver si con este ejemplo lo ves más claro:

Dale a result para ver cómo queda.

Kirguiso · #10 (**permalink**) 20/10/2015, 14:19

Mátame pero no lo entiendo muy allá.

A ver entiendo que sí al 100% le sumas x píxeles de margen pues se sale (aparece el scrol), ya que es el 100% más los x píxeles de margen.

Ahora mi duda viene en... ¿dónde aplico el margin que quiero aplicar? En el body que es, en mi caso, el contenedor que abarca todo el diseño o en cada unos de los elementos que tengo?

Pzin millones de gracias máquina!!

Kirguiso · #11 (**permalink**) 20/10/2015, 14:23

A ver a ver... creo que lo voy pillando.

Al body o a cualquier otro elemento de bloque no hace falta ponerles widht pq de normal ellos ocupan ya el 100%, de ahí a que se le ponga widht auto no?

Y entonces sí se le puede poner margin al body y a cualquier otro elemento de bloque, no?

Entonces dónde se fija el ancho? Sí lo quieres, como en mi caso, del 100% no haría falta indicarlo, no? Bueno con widht auto.

O widht auto no hace falt ni ponerlo?

Creo que lo he entendido, puede ser?

Gracias!!

pzin · #12 (**permalink**) 20/10/2015, 14:48

Cita:

Iniciado por Kirguiso

A ver a ver... creo que lo voy pillando.

Al body o a cualquier otro elemento de bloque no hace falta ponerles widht pq de normal ellos ocupan ya el 100%, de ahí a que se le ponga widht auto no?

Y entonces sí se le puede poner margin al body y a cualquier otro elemento de bloque, no?

Entonces dónde se fija el ancho? Sí lo quieres, como en mi caso, del 100% no haría falta indicarlo, no? Bueno con widht auto.

O widht auto no hace falt ni ponerlo?

Creo que lo he entendido, puede ser?

Gracias!!

Sí a todo.

Si quieres width: auto no hace falta indicarlo ya que es el valor por defecto.

Kirguiso · #13 (**permalink**) 20/10/2015, 15:01

Pzin oleee mil gracias!!

Y si quisiera el 80%, por ejemplo, dónde y cómo indicaría el widht?

Pq si pongo un div contenedor que agrupe a todo ese tamb sería un elemento bloque y ocuparía el 100% por defecto y estaríamos en las mismas, no?

AngelKrak · #14 (**permalink**) 20/10/2015, 17:18

Cita:

Iniciado por Kirguiso

Pzin oleee mil gracias!!

Y si quisiera el 80%, por ejemplo, dónde y cómo indicaría el widht?

Pq si pongo un div contenedor que agrupe a todo ese tamb sería un elemento bloque y ocuparía el 100% por defecto y estaríamos en las mismas, no?

puedes ponerle el width: 80%; al div, el 100% que te dijo pzin es por defecto que se le asigna a un bloque, pero si tu le das algun width en especifico ese width por defecto se le borra y se le asigna el tuyo ;)

Kirguiso · #15 (**permalink**) 21/10/2015, 02:11

Muchísimas gracias a los dos, lo he entendido a la perfección!!

Gracias máquinas!

pzin · #16 (**permalink**) 21/10/2015, 06:36

Cita:

Iniciado por AngelKrak

el 100% que te dijo pzin es por defecto que se le asigna a un bloque

No. Por defecto es auto, que no es lo mismo que 100%, si no, no tendría este problema.

AngelKrak · #17 (**permalink**) 21/10/2015, 09:52

pzin ahi ya te estas contradiciendo entonces .-. auto es = a 100% del Bloque Hijo