AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

Altura y Anchura CSS


Next Page >>
HTML images

CSS Tutorial » Altura y Anchura CSS

Como aplicar altura y anchura en CSS definicion.

La propiedad de ancho y alto define el ancho y alto del área de contenido de un elemento. Este ancho y alto no incluye relleno, bordes ni márgenes.

CSS tiene varias propiedades de dimensión, como: width - ancho, height - alto, ancho máximo - max-width, ancho mínimo - min-width, alto máximo - max-height y alto mínimo - min-height que le permiten controlar el ancho y alto de un elemento. Las siguientes secciones describen cómo utilizar estas propiedades para crear un mejor diseño de página web.

Este elemento verde tiene un ancho de 300px, un alto de 150px, borde rojo fino, solid, marjen amarillo de 10px.

Las propiedades de alto y ancho pueden tener los siguientes valores:

 

Alto y ancho de CSS

La propiedad de ancho y alto define el ancho y alto del área de contenido de un elemento. Este ancho y alto no incluye relleno, bordes ni márgenes.

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>CSS establece la anchura y la altura de un elemento</title>
<style>
div {
width: 310px;
height: 210px;
background-color: #9FC;
}
</style>
</head>
<body>
<div>¡Juega con los valores para ver cómo funciona!</div>
</body>
</html>

Las reglas de estilo anteriores asignan un ancho fijo de 310 píxeles y una altura de 210 píxeles al elemento <div>.

Etiquetas: Altura y anchura de CSS, alto y ancho, style, como aplicar altura y anchura en css, que es anchura y altura en css

 

Configuración de la anchura y la altura máximas

Puede usar la propiedad max-width y max-height para especificar el ancho y alto máximos del área de contenido.
Este ancho y alto máximo no incluye rellenos, bordes ni márgenes.

Un elemento no puede ser más ancho que el valor de ancho máximo, incluso si el valor de la propiedad de ancho se establece en algo más grande. Por ejemplo, si el ancho se establece en 350 px y el ancho máximo se establece en 290 px, el ancho real del elemento será 290 px. Similar en altura. Veamos un ejemplo:

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>CSS Set Maximum Width of an Element</title>
<style>
pre {
width: 350px;
background-color: #9F9;
}
div {
width: 350px;
max-width: 250px;
background: #bbb3ff;
}
p {
float: left;
max-width: 400px;
background: #eee8aa;
}
</style>
</head>
<body>
<pre>esta caja verde tiene 350 px</pre>
<div>El ancho máximo de este elemento div se establece en 250px, por lo que no puede ser más ancho que eso.</div>
<p>Ingrese un texto para ver cómo funciona.</p>
</body>
</html>
Nota:  Si la propiedad min-width se especifica con un valor mayor que el de la propiedad max-width, en este caso, el valor min-width será el que se aplique.

 

Configuración de la anchura y la altura mínimas

Puede utilizar la propiedad min-width y min-height para especificar la anchura y la altura mínimas del área de contenido. Este ancho y alto mínimo no incluye rellenos, bordes ni márgenes.

Un elemento no puede ser más estrecho que el valor de ancho mínimo, incluso si el valor de la propiedad de ancho se establece en algo menor. Por ejemplo, si el ancho se establece en 300 px y el ancho mínimo se establece en 400 px, el ancho real del elemento será 400 px. Veamos cómo funciona realmente:

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>CSS establece el ancho mínimo de un elemento</title>
<style>
pre {
width: 300px;
background-color: #9F9;
}
div {
width: 100px;
min-width: 350px;
background: #bbb3ff;
}
p {
float: left;
min-width: 400px;
background: #eee8aa;
}
</style>
</head>
<body>
<h2> CSS establece el ancho mínimo de un elemento</h2>
<pre>esta caja verde tiene 300 px</pre>
<div>El ancho mínimo de este elemento div se establece en 350px,
por lo que no puede ser más estrecho que eso.</div>
<p>Ingrese un texto para ver cómo funciona.</p>
</body>
</html>
Nota: La propiedad min-width se usa generalmente para garantizar que un elemento tenga al menos un ancho mínimo incluso si no hay contenido presente. Sin embargo, se permitirá que el elemento crezca normalmente si su contenido excede el ancho mínimo establecido.

 



Etiquetas: Altura y ancho de CSS, alto y ancho css, style, como aplicar altura y anchura en css, Anchura y altura, que es anchura y altura en css, altura y anchura css
Altura y Anchura CSS - css.es

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.