Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.
Go to Previous Section:
ListsEsta es la sección 11 del Tutorial de CSS Getting Started ; se describen cómo se puede usar CSS para controlar el espacio que un elemento ocupa cuando se muestra. En su documento de ejemplo, se cambia el espacio y se agregan reglas decorativos.
Información: Cajas
Cuando el navegador muestra un elemento, el elemento ocupa un espacio. Hay cuatro partes en el espacio que ocupa.
En el centro, existe el espacio que el elemento necesita para mostrar su contenido. Alrededor de eso, no hay relleno. En torno de est, hay un borde. En torno esto, hay un margen que separa este elemento de otros elementos.
|
margin border padding element El gris pálido muestra partes del diseño. |
element Esto es lo que se ve en su navegador. |
El relleno, el borde y el margen pueden tener diferentes tamaños en la parte superior, derecha, inferior e izquierda del elemento. Alguno o todos estos tamaños pueden ser cero.
Coloreando
El relleno es siempre el mismo color que el elemento del fondo. Así que cuando se establece el color de fondo, se ve el color aplicado al elemento en sí y su relleno. El margen es siempre transparente.
|
margin border padding element El elemento tiene un fondo verde . |
element Esto es lo que se ve en su navegador. |
Borders
Puede utilizar los bordes para decorar elementos con líneas o cuadros.
Para especificar la misma frontera todo alrededor de un elemento, utilice la propiedad {{cssxref ("border")}} . Especifique el ancho (por lo general en píxeles para la visualización en una pantalla), el estilo, y el color.
Los estilos son:
solid |
dotted |
dashed |
double |
inset |
outset |
ridge |
groove |
También puede establecer el estilo a none ( ninguno) o hidden (oculto), para eliminar explícitamente la frontera (border ), o establecer el color como transparente para hacer la frontera invisible sin cambiar el diseño.
Para especificar los bordes de uno en uno por separado, utilice las propiedades: {{cssxref ("border-top")}}, {{cssxref ("border-right")}}, {{cssxref ("border-bottom")} }, {{cssxref ("border-left")}}. Usted puede utilizar estas para especificar un borde solo en un lado, o diferentes los bordes en diferentes lados.
Esta norma establece el color de fondo y el borde superior de los elementos de la etiqueta h3:
h3 {
border-top: 4px solid #7c7; /* mid green */
background-color: #efe; /* pale green */
color: #050; /* dark green */
}
El resultado se ve así:
|
Stylish heading |
Esta regla hace que las imágenes sean fáciles de ver, dándoles un borde gris medio a todo:
img {border: 2px solid #ccc;}
El resultado se ve así:
| Image: |  |
Márgenes y relleno
Use márgenes y el relleno para ajustar las posiciones de los elementos 'y crear el espacio que les rodea.
Utilice la propiedad {{cssxref ("margin")}} o la propiedad {{cssxref ("padding")}} para establecer los márgenes y el relleno con sus anchuras respectivamente.
Si especifica una anchura, que se aplica en todo el elemento (arriba, derecha, abajo y de izquierda).
Si especifica dos anchos, la primera se aplica a la parte superior e inferior, la segunda a la derecha y la izquierda.
Puede especificar los cuatro anchos en el orden: arriba, derecha, abajo, de izquierda.
Esta norma delimita párrafos con la class remark, dándoles un borde rojo a su alrededor.
El padding (relleno) separa un poco todo el borde del texto .
A la izquierda una sangría desde el margen del párrafo con respecto al resto del texto (margin-left ):
p.remark {
border: 2px solid red;
padding: 4px;
margin-left: 24px;
}
El resultado se ve así:
|
A continuación es un párrafo normal. Aqui con la clase remark. |
Cuando se utiliza márgenes y el relleno para ajustar la manera en que los elementos se disponen, sus reglas de estilo interactúan con los estilos de tu navegador por defecto y pueden ser muy complejas.
Los distintos navegadores ponen que los elementos de manera diferente. Los resultados pueden ser similar ,hasta que nuestro hoja de estilos cambia las cosas. A veces esto puede hacer que sus hojas de estilo den resultados sorprendentes.
Para obtener el resultado deseado, es posible que tenga que cambiar el marcado de su documento. La página siguiente de este tutorial tiene más información al respecto.
Para obtener información detallada acerca de relleno, márgenes y bordes, consulte la página de referencia Modelo de caja.
Acción: Agregar bordes
Edite su archivo CSS , style2.css. Agrega esta regla para dibujar una línea a través de la página sobre cada encabezado:
h3 {border-top: 1px solid gray;}
Si usted tomó el cambio en la última página, modificara la regla que ha creado, de lo contrario agregar la nueva regla para añadir espacio debajo de cada ítem de la lista:
li {
list-style: lower-roman;
margin-bottom: 8px;
}
Actualice el navegador para ver el resultado:
|
(A) The oceans
(B) Numbered paragraphs 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum |
Agrega una regla a la hoja de estilos, para que aparesca un amplio borde alrededor de los la lista de océanos, en un color que le recuerda al mar, algo como esto:
|
(A) The oceans
(B) Numbered paragraphs . . . |
(No es necesario que coincida con el ancho y el color que se ve aquí exactamente.)
Ver una solución a este desafío.
What next?
Go to Next Section:
LayoutAl especificar márgenes y el relleno, se modificó el diseño del documento. En la página siguiente se cambia el layout de su documento de otra manera.