elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recuerda que debes registrarte en el foro para poder participar (preguntar y responder)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  modelo de caja css
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: modelo de caja css  (Leído 3,067 veces)
Robocop8

Desconectado Desconectado

Mensajes: 156


Ver Perfil
modelo de caja css
« en: 21 Noviembre 2017, 15:47 pm »

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


« Última modificación: 21 Noviembre 2017, 15:56 pm por engel lex » En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: modelo de caja css
« Respuesta #1 en: 21 Noviembre 2017, 16:02 pm »

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...


En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
Robocop8

Desconectado Desconectado

Mensajes: 156


Ver Perfil
Re: modelo de caja css
« Respuesta #2 en: 21 Noviembre 2017, 16:22 pm »

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
En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: modelo de caja css
« Respuesta #3 en: 21 Noviembre 2017, 16:37 pm »

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
En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
Robocop8

Desconectado Desconectado

Mensajes: 156


Ver Perfil
Re: modelo de caja css
« Respuesta #4 en: 21 Noviembre 2017, 16:53 pm »

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
En línea

Orubatosu


Desconectado Desconectado

Mensajes: 2.515


Ver Perfil WWW
Re: modelo de caja css
« Respuesta #5 en: 22 Noviembre 2017, 11:30 am »

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
  1. border-left: 6px solid red;
  2.  

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)
« Última modificación: 22 Noviembre 2017, 11:33 am por Orubatosu » En línea

"When People called me freak, i close my eyes and laughed, because they are blinded to happiness"
Hideto Matsumoto 1964-1998
engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: modelo de caja css
« Respuesta #6 en: 22 Noviembre 2017, 12:49 pm »

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
En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
Orubatosu


Desconectado Desconectado

Mensajes: 2.515


Ver Perfil WWW
Re: modelo de caja css
« Respuesta #7 en: 22 Noviembre 2017, 14:02 pm »

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
« Última modificación: 22 Noviembre 2017, 14:18 pm por Orubatosu » En línea

"When People called me freak, i close my eyes and laughed, because they are blinded to happiness"
Hideto Matsumoto 1964-1998
engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: modelo de caja css
« Respuesta #8 en: 22 Noviembre 2017, 14:52 pm »

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
En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Duda en la conversión de Modelo Entidad Relación a Modelo Relacional
Bases de Datos
theluigy13etv 1 4,114 Último mensaje 22 Mayo 2015, 19:33 pm
por ZeroVzla
Modelo de caja tradicional, ¿Por qué aplicar text-aling al body?
Desarrollo Web
TØtti 1 2,007 Último mensaje 3 Marzo 2017, 14:37 pm
por dato000
Suntech MP4 Thorn - ¿con un imán en la caja? « 1 2 »
Hardware
Herchi 13 6,056 Último mensaje 25 Junio 2020, 17:10 pm
por Herchi
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines