Concepto de margen y relleno CSS.
Diferencias entre margin y padding
CSS (box model). Ejemplos
(CU01028D)
MARGEN Y RELLENO
• Para avanzar en la comprensión del
funcionamiento de CSS debemos
conocer, saber utilizar y diferenciar ...
• Empezaremos realizando una definición de conceptos:
• a) Contenido de un elemento HTML es aquello que se pretende mostra...
• Un elemento HTML puede tener margin y
padding, sólo tener margin, sólo tener
padding, o no tener ni margin ni padding. E...
• /* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
body {background-color: yellow; width: 60%;}
h1{mar...
• Relleno - Borra un área alrededor del
contenido. El relleno se ve afectado por el
color de fondo de la caja
• Contenido ...
• La propiedad border-width se usa para ajustar
el ancho de la frontera.
• El ancho se establece en píxeles, o mediante el...
• Ejemplo
• p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Ancho del borde
• La propiedad border-width se usa para ajustar el
ancho de la frontera.
• El ancho se establece en píxele...
• p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Color del borde
• La propiedad border-color se utiliza para establecer el
color del borde. El color se puede ajustar por:
...
• Ejemplo
• p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
Frontera - Individual lados
• En CSS, es posible especificar diferentes fronteras
para diferentes lados:
• Ejemplo
• p
{
b...
Referencias
• http://www.w3schools.com/css/css_border.asp
• http://www.aprenderaprogramar.com/index.php
?option=com_conten...
Concepto de margen y relleno css
Concepto de margen y relleno css
Upcoming SlideShare
Loading in …5
×

Concepto de margen y relleno css

304 views

Published on

Published in: Engineering
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
304
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Concepto de margen y relleno css

  1. 1. Concepto de margen y relleno CSS. Diferencias entre margin y padding CSS (box model). Ejemplos (CU01028D)
  2. 2. MARGEN Y RELLENO • Para avanzar en la comprensión del funcionamiento de CSS debemos conocer, saber utilizar y diferenciar dos propiedades importantes: margin y padding. Al igual que con los bordes, tendremos distintas propiedades derivadas de las principales y también tendremos shortand notations o notaciones abreviadas para poder expresarlas.
  3. 3. • Empezaremos realizando una definición de conceptos: • a) Contenido de un elemento HTML es aquello que se pretende mostrar al visualizar ese elemento: puede ser un texto, una imagen o quizás otros elementos como un objeto reproductor de sonido ó un mapa. El contenido en CSS tiene forma de caja rectangular. • b) Borde: es el perímetro que engloba el contenido y el posible relleno (en inglés padding) entre el borde y el contenido. • c) Relleno (padding): es el espacio transparente que se puede dejar, opcionalmente, entre el contenido y el borde del elemento. El relleno no tiene color (pero permite ver el color de fondo). • d) Margen: es el espacio transparente que se puede dejar, opcionalmente, entre el borde del elemento y el borde de otras cajas adyacentes. El margen no tiene color (pero permite ver el color de fondo). • Viendo esquemas gráficos y código se comprenderán con más facilidad estos conceptos:
  4. 4. • Un elemento HTML puede tener margin y padding, sólo tener margin, sólo tener padding, o no tener ni margin ni padding. En caso de no tener margin ni padding el elemento aparecerá “ajustado” exactamente a su caja contenedora.
  5. 5. • /* Curso CSS estilos aprenderaprogramar.com*/ *{font-family: arial;} body {background-color: yellow; width: 60%;} h1{margin: 25px; padding: 45px; border: solid 6px blue; } h2{border-style: solid; border-color:red; margin: 0; padding:0;} div {border: solid thick black;} div div {border: solid medium purple;} div div div {border: dashed medium grey;} img {border: solid #FF00FF 2px;}
  6. 6. • Relleno - Borra un área alrededor del contenido. El relleno se ve afectado por el color de fondo de la caja • Contenido - El contenido de la caja, en la que aparecen el texto y las imágenes
  7. 7. • La propiedad border-width se usa para ajustar el ancho de la frontera. • El ancho se establece en píxeles, o mediante el uso de uno de los tres valores predefinidos: fino, medio o grueso. • Nota: La propiedad "border-width" no funciona si se utiliza solo. Utilice la propiedad "border-style" para establecer las fronteras primero.
  8. 8. • Ejemplo • p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }
  9. 9. Ancho del borde • La propiedad border-width se usa para ajustar el ancho de la frontera. • El ancho se establece en píxeles, o mediante el uso de uno de los tres valores predefinidos: fino, medio o grueso. • Nota: La propiedad "border-width" no funciona si se utiliza solo. Utilice la propiedad "border-style" para establecer las fronteras primero.
  10. 10. • p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }
  11. 11. Color del borde • La propiedad border-color se utiliza para establecer el color del borde. El color se puede ajustar por: • Nombre - indique el nombre del color, como "rojo" • RGB - especificar un valor RGB, como "rgb (255,0,0)" • Hex - especificar un valor hexadecimal, como "# ff0000" • También puede establecer el color del borde de "transparente". • Nota: La propiedad "border-color" no funciona si se utiliza solo. Utilice la propiedad "border-style" para establecer las fronteras primero.
  12. 12. • Ejemplo • p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }
  13. 13. Frontera - Individual lados • En CSS, es posible especificar diferentes fronteras para diferentes lados: • Ejemplo • p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
  14. 14. Referencias • http://www.w3schools.com/css/css_border.asp • http://www.aprenderaprogramar.com/index.php ?option=com_content&view=article&id=732:con cepto-de-margen-y-relleno-css-diferencias-entre- margin-y-padding-css-box-model-ejemplos-cu010 28d&catid=75:tutorial-basico-programador-web- css-desde-cero&Itemid=203

×