modelo de caja css

[Robocop8]

Saludos! me podrian ayudar a entender mejor como funciona eso de la caja css, es que hay muchas cosas que me confunden, por ejemplo, no entiendo por que el border se ve tan lejos del contenido si cuando le das un border sale en el mismo contenido y no se por que en la caja se ve tan lejos, aqui una imagen de ejemplo



lo que pasa es que necesito aprender a hacer paginas responsive y se me esta haciendo un poco complicado entender algunas cosas. Cualquier ayuda, gracias de antemano.

Imagen ajustada a las reglas

[engel lex]

css es algo que toma tiempo dominar y comprender las consecuencias de una regla... hay posiblidad que al poner el margen los elementos internos lo estén heredando...

[Robocop8]

creo que no entendiste la pregunta, no estoy haciendo nada, solo es saber por que si el border deberia salir pegado del contenido en la caja, por que sale separado a eso me referia

[engel lex]

ok! lo siento XD


sobre tu duda, es la representación usual

debes tomar en cuenta que dentro de la caja están content, padding... border, bueno, es el borde, está adentro y afuera simultaneamente... y como tal fuera de la caja solo margin

el padding es el relleno interno (padding literalmente significa relleno)... imaginalo como... una caja

tu tienes tu contenido, un jarron de cristal de 10cm x 10cm x 10cm, no vas a meterlo en una caja de 10cm x 10cm x 10cm porque si se golpea se parte, así que metes 10cm de relleno en todas direcciones... allí tienes el contenido y el relleno, luego viene el borde que es la caja que lo contiene, por ultimo el margen es el espacio que dejas entre la caja y otras cosas alrededor

[Robocop8]

creo que entiendo mejor ahora, segun lo que me dijiste entendi que en realidad no estan separados, es solo la caja que lo muestra asi para ver sus valores por separado, ahora si. Gracias amigo! XD

[Orubatosu]

Es que creo que se están mezclando dos cosas diferentes.

En primer lugar, entiende que en HTML5 y CSS se usa lo que se conoce como "Modelo caja-contenedor". Cada elemento HTML en principio está dentro de una caja "imaginaria" que tiene un alto correspondiente al tamaño del elemento mas el "padding" y un ancho que ocupa todo el espacio disponible (a menos que definas otra cosa)

Ahora imagina la caja. Supón un cuadrado con un objeto dentro de la misma

El margen es el espacio entre el cuadrado y los elementos adyacentes. Al poner un margen superior, estableces el espacio entre la caja y el elemento superior

El padding o relleno es el espacio entre esa caja, y el elemento que hay dentro de la misma

Y ojo, el border no es en principio una separación, es un elemento físico que tu decides poner para que el límite de esa caja se vea. Ya sea como una línea fina, gruesa, solida, etc... por ahí lo mismo te estás "liando"

Es decir: usas "border" para que el límite de la caja aparezca dibujado en tu página, no para establecer ninguna distáncia. Cuando indicas una medida en border, por ejemplo

Código (css) [Seleccionar] Expandir


border-left: 6px solid red;


No estás estableciendo una distancia entre elementos, estás indicando el grosor de la línea que aparecerá en el borde (y el color y estilo)

[engel lex]

Orubatosu, te discuto esto , border si tiene un tamaño intrínseco y puede ser usado como distanciador ya que externamente el margin se mantiene así como el padding interno

[Orubatosu]

Claro, puedes usar el borde para eso, pero no es su  función. Puedes dejar el borde invisible y jugar con sus medidas para usarlo como margen, pero eso es liar las cosas innecesariamente (diría yo)

Aunque claro, si establecemos un borde grueso hay que tenerlo en cuenta para el resto de medidas

Obviamente si, tienes toda la razón del mundo, pero no creo que sea una buena practica usar los bordes para el trabajo que corresponden a otras propiedades

Creo (y es mi impresión solamente) que border debería de usarse solo cuando deseamos mostrar un borde alrededor del elemento, y pensar eso si que si le damos un grosor debemos de tenerlo en cuenta

Por cierto, el grosor de border se cuenta dentro del elemento ¿no? hace tiempo que no miro ese tema

[engel lex]

Obviamente si, tienes toda la razón del mundo, pero no creo que sea una buena practica usar los bordes para el trabajo que corresponden a otras propiedades

tienes razón yo lo contrarecomendaría por todos lados porque es complicado (se distribuye entre adentro y afuera) pero sabemos que los caminos del señor css son complicados