Ahora por ejemplo Yo aquí quisiera tener un poco de separación y voy a poner a quien Margie en top digamos.
Para mí tener un poco de separación y puedes ver que no lo agrega.
Esto pasa porque estos elementos de aquí son enlaces y en CSS algunos elementos tienen lo que se conoce
como un display Block y otros tienen lo que es un display inline.
En este caso los enlaces poseen un display inline.
Eso quiere decir que no le puedes aplicar un ancho.
Veamos un ejemplo si yo aquí le pongo un width es la forma en que defines un ancho digamos un pixel.
Puedes ver que no hace caso no hace nada.
Si lo pones Arquillos pixeles no hace nada va a ser caso si le ponemos o cambiamos su display por default
es inline.
Puede ser que no cambia pero si lo pongo como blog va a ser me caso y le va a definir un ancho de 10
pixeles y puedes ver que también nos agrega al margen entonces esto pasa de nueva cuenta porque los
enlaces tienen un display inline y tenemos que modificarlo Blok ahora Block también.
Por ejemplo si elimino este UIT-T va a ser que el elemento tome todo el espacio disponible y en este
caso por ejemplo este puedes ver que crece todo el espacio que haya disponible aquí yo le estoy dando
el PADI ni de ahí quiero que tome su tamaño.
Por lo tanto existe uno entre estos dos que sin Block Block la puedes aplicar márgenes y anchos pero
no va a tomar todo el espacio disponible como si fuera un display.
Entonces por ejemplo los enlaces son display inline al igual que las imágenes son display inline si
quieres darles un ancho o márgen tienes que modificarlos a Display Block o display Block los dips los
H3 los párrafos todos son display vlog por lo tanto les puedes dar un ancho o un margen sin ningún problema.
Ahora quiero mostrarte algo voy a eliminar esta parte de aquí con el Lasky Display display en la block
estaba bien lo que quería era agregar un widget de digamos 10 pixeles.
Si guardo cambios puedes ver que aquí se verá inmediatamente que no son 10 pixeles a esta mas grande
y si inspecciona este elemento puedes ver que en realidad mide 70 pixeles que aparece una pequeña regla
y puedes ver que mide 70 pixeles eso pasa porque yo le estoy dando un Padín vamos a hacerlo más fácil
de entender si le doy un Padín de digamos 5 pixeles y guardo cambios puedes ver que se inspecciona este
elemento mide 20 pixeles que aparecen 20 eso pasa porque se agrega un width de 10 pixeles pero además
agrega el paying de 5 pixeles y el Pauling se recuerda se va a agregar 5 pixeles a la izquierda 10 a
medias que es el UIT-T y 5 a la derecha.
Por lo tanto por eso el elemento mide 20 esto usualmente lleva como a comportamientos un poco extraños
porque uno le da ciertas medidas a un elemento y resulta que el Padín afecta y lo hace mas grande.
La buena noticia es que hay un snippets hay una forma de que el país no tome o no se ha tomado en cuenta
cuando le das un ancho y no afecte a Erick.
Esta persona trabaja en Google desarrollador de Google CROM y comparte este snippets para solucionar
este error lo voy a colocar aquí arriba despegamos aquí entonces es lo que se conoce como box Fishing
y este de aquí lo voy a cortar para acá para ponerle un HTML no tener etiquetas repetidas y este de
aquí lo voy a colocar aquí.
Básicamente lo que hace este código es que lo que va a hacer es que no nos afecte o si le ponemos un
ancho de 200 píxeles y agregamos un padre que no siga incrementando su tamaño se mantengan los 200 píxeles.
Entonces si abrimos aquí inspeccionamos este a pesar que se mantienen 10 píxeles estoy pasando aquí
un par de 5 y un ancho de 10 y el que se queda de 10 píxeles.
Incluso aquí en Crom puedes ver que en esta sección aparece el ancho todavía en negro que es el padre
y también Vanir el ancho del elemento.
Puedes ver qué dice Zero porque tenemos 5 de página a la izquierda 5 a la derecha y su ancho es de 10.
Entonces esta es una snippets bastante útil y de nueva cuenta también están todos mis proyectos.