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

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

general

Fundamentos de CSS: Selectores Parte II

Selectores CSS: Fundamentos Seguimos conla nueva temática en el Blog, traduciendo al español interesantes articulos de una colega desarrolladora front-end freelance que se llama Maria Kovacs. Esta es la segunda parte sobre Selectores CSS. Atributos Antes de explorar los selectores atributos de CSS tenemos que entender que és un Atributo HTML y si ya viste algun documento HTML seguramente sabes co ...

general curso blogger desde cero

Conoce el CSS de tu blog.

Si estás siguiendo de cerca el curso "Blogger desde cero", sabrás que la promesa de publicación para este sábado era profundizar en un tema referente al mundo del diseño de blogs. Ofrecerte una información útil de aproximación a los códigos inverosímiles que observamos -entre el estupor y el pánico- cuando nos proponemos modificar la plantilla de nuestro blog. Con este fin, tengo el abs ...

general diseño

Ajustar las imágenes automáticamente al tamaño de nuestro blog con CSS

Han sido varias personas ya las que me han preguntado cómo hacen en el blog Los Tragaldabas para poner las fotos de esa manera: Así que he querido hacer un post explicandolo, así como otro sobre cómo hacerlo para ajustar las imágenes de manera autómatica por si puedo ayudar a más personas. Primero vemos cómo lo hacen ellos, y luego cómo hacerlo de manera automática. Eso sí, lo primero que quiero a ...

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

Nuevo curso de html y css

Después de mucho pedírmelo.... ¡¡¡el curso de html y css está aquí!! Siento haber tardado tanto en lanzarlo, pero preparar un curso de html no es como preparar un curso sobre promocionar un blog. Al fin y al cabo, todo aquello que os enseño en cómo promocionar o en otros de mis cursos, no deja de estar en vuestro idioma. El html es un lenguaje nuevo. Ya no vale copiar y pegar como hacíamos en los ...

rendimiento

Mejora el rendimiento de tu web optimizando sus hojas de estilo css

Optimizar las hojas de estilo mejora considerablemente el rendimiento del dibujado de una página web. Las hojas de estilo de tu sitio web o blog son las encargadas de darle presentación a los componentes que sirven para formar tu página web. El cuidado y optimización de las mismas suele ser pasado por alto con frecuencia, normalmente nos basta con que "funcione la presentación" pero no n ...