Tecnología

Codigos y Tecnologias Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Editar dimensiones de objetos con código CSS


Trabajar en la edición de sitios web utilizando el código CSS puede resultar un tanto complejo, pero es una forma muy recomendable para un control total sobre cada parámetro y elemento de nuestra web. Al codificar Estilos en cascada, darle diferentes tamaños a cada objeto mediante CSS puede resultar un tanto confuso. Te contamos paso a paso cómo modificar los elementos para crear la web según tus propios intereses.



Cada elemento HTML que configuramos tiene dos juegos de características distintas, y estas a su vez afectan las dimensiones finales del elemento. Primero hay que diferenciar si el objeto es en bloque o en línea. Luego hay que tener en cuenta los parámetros de Margen (margin) y Rellenos (padding). Los elementos que afectan las dimensiones de nuestro elemento en la web son el Ancho (Width) y el Alto (Height).

Si el elemento que vamos a modificar está en línea, es aquél elemento que únicamente necesita espacio suficiente para mostrar el contenido. No se puede asignar alto ni ancho, en caso de configurar estas características para un objeto en línea, no veremos ningún cambio porque no hace efecto. Si cambiamos el código CSS y añadimos a la línea de código el parámetro display:block, entonces veremos que los apartados de altura y ancho pasan a surtir efecto.

Te puede interesar: CSS, creando hojas de estilo enlazadas

Configuración de márgenes y rellenos

Tanto los márgenes como los rellenos crean un espacio entre los distintos componentes de una web. El margen es un espacio para diferenciar el objeto del exterior, mientras que el relleno es una forma de limitar el contenido hacia el interior del elemento. Es importante remarcar que no importa si el objeto es el bloque o en línea, cuando se modifican los atributos de margen y relleno los cambios siempre se ven aplicados.

En materia de ancho y alto, son dos características que marcan el área donde aparecerá el contenido de cada objeto. Sin embargo, la dimensión total de un elemento no es únicamente el espacio delimitado por alto y ancho. También se le debe sumar el valor de los márgenes, bordes y relleno. De esta forma obtendremos la información total sobre el espacio que ocupa en nuestra web un determinado elemento. Hay que tener en cuenta que los valores muchas veces tienen límites, mayores y menores. De lo contrario se podrían crear gigantescos o microscópicos elementos. Seguiremos analizando componentes para las dimensiones en CSS en el próximo post.

.

Fuente: este post proviene de Codigos y Tecnologias, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Envía una notificación de una presunta infracción de derechos. También puedes hacerlo a través de nuestro formulario de contacto.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

¡No te pierdas nuestra selección diaria!

Suscríbete y recibirás en tu correo nuestras mejores ideas

Suscríbete ahora

Relacionado

Código CSS Cascading Style Sheets CSS ...

¿Qué es el código CSS y para qué lo utilizan?

En el mundo del desarrollo web existen algunos términos que se repiten constantemente. Quizás algunos ya los conozcas, pero no termines de saber a qué hacen referencia realmente. Por eso, hoy empezamos una serie de posts acerca de las bases del desarrollo de páginas web y terminología relacionada. Lo primero que aprenderemos es acerca del CSS, qué es y para qué sirve. ¿Qué es el código CSS y para ...

general cms diseño web ...

Modifica la tipografía de tú web o blog con CSS

En nuestra web o blog la tipografia es importante ya que añade personalidad al sitio. No siempre nos gusta la tipografía predefinida o no va con el tema de nuestra web/blog, por lo que nos vemos en la necesidad de modificarla. Lo normal para mantener una cierta coherencia es no usar mas de dos fuentes, para que no parezca que nos hemos salido del sitio y hay que tener en cuenta que las fuentes de ...

Código CSS Configuración Diseño web ...

Visualización de páginas web configurando el código CSS

Siguiendo con las posibilidades que brinda el diseño de páginas web utilizando código CSS. Hoy nos dedicamos a distintos apartados relacionados con las dimensiones y la adaptación a diseños responsivos. Con ejemplos que nos permitan visualizar la forma en la que nuestras modificaciones al código modifican la visual de la página. Comenzamos con dos parámetros que ya habíamos mencionado muy por enci ...

general cms diseño web ...

Modifica la tipografía de tú web o blog con CSS

En nuestra web o blog la tipografia es importante ya que añade personalidad al sitio. No siempre nos gusta la tipografía predefinida o no va con el tema de nuestra web/blog, por lo que nos vemos en la necesidad de modificarla. Lo normal para mantener una cierta coherencia es no usar mas de dos fuentes, para que no parezca que nos hemos salido del sitio y hay que tener en cuenta que las fuentes de ...

Código CSS Fondo de página Tutoriales CSS

Cambiar fondo de página en CSS

El fondo de una página web es algo que tenemos que aprender siempre a personalizar. Hay diferentes formas, pero si lo que deseamos es poder hacerlo utilizando código CSS, entonces hay que dedicarle un poco de tiempo a esta línea de código y cómo crearla. En el pasado esto se podía hacer en HTML, pero desde que se separó para darle estructura al HTML y el CSS para elementos de diseño, la tarea es s ...

Hojas de estilo CSS Editar web ...

CSS, creando hojas de estilo enlazadas

Las hojas de estilo son un elemento básico del desarrollo de una página web. Permiten modificar distintos parámetros de formato, que van desde el tamaño de fuente hasta el color del fondo o el tipo de fuente, entre otros. Se trata de archivos con extensión CSS (Cascading Style Sheets) y van componiendo diferentes aspectos dentro de una página HTML. La principal ventaja al usar hojas de estilo, es ...

Tutorial

Tutorial de Elementor: Visual composer gratuito para WordPress.

La existencia de visuals composer para WordPress es una salvación, ya que a día de hoy a todos nos gusta crear en un tiempo récord el diseño de nuestra página web, sin embargo en muchos casos el precio de estos page builders, como se dice en el mundo anglosajón, ronda unos precios desorbitados (a partir de 40€), sin embargo hace unos días comenzó a correr como la pólvora la noticia de la creación ...

general

Creación y personalización de menús en Blogger paso a paso.

La creación de menús en páginas web es fundamental para la estructuración de la información a la que los usuarios pueden acceder. En los Blogs, al igual que en cualquier publicación web, el orden y la presentación de las categorías de la información que manejamos puede ordenarse mediante un menú. La exposición de contenidos mediante un menú facilita a los usuarios el acceso a la información, consi ...

rendimiento

Mejora el rendimiento de tu web optimizando sus imágenes

Optimizar las imágenes, en términos de rendimiento web consiste en hacer que, sin perder su calidad, ocupen menos espacio en KB para que su descarga desde el servidor al navegador del cliente sea lo más rápida posible. Analizaremos varias formas de optimización de imágenes. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio we ...

Diseño para Blogs Uncategorized Apariencia ...

La barra de menu y las nuevas tendencias

La barra de menu y las nuevas tendencias La barra de menu es una de las partes más importantes de el diseño web, sirva para muchas cosas y lo más importante nos ayuda a encontrar todo de forma rápida y ágil A estas alturas sé que hay muchos blogs que no tienen barra de menu y cometen un error, porque si no cuentan con un buen widget buscador… es muy complicado que los lectores pasen horas na ...