Your SlideShare is downloading. ×
0
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Concepto de margen y relleno css
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Concepto de margen y relleno css

145

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
145
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Concepto de margen y relleno CSS. Diferencias entre margin y padding CSS (box model). Ejemplos (CU01028D)
  • 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. • 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. • 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. • /* 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. • 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. • 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. • Ejemplo • p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }
  • 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. • p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }
  • 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. • Ejemplo • p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }
  • 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. 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

×