1 / 15

CSS Margin

CSS Margin. WEB DESIGN. display.  is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline. A block element.

joylyn
Download Presentation

CSS Margin

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS Margin WEB DESIGN

  2. display •  is CSS's most important property for controlling layout. Every element has a default display value depending on what type of element it is. • The default for most elements is usually block or inline.

  3. A block element • is often called a block-level element. An inline element is always just called an inline element.

  4. block div  is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can. 

  5. Margin • The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. • The top, right, bottom, and left margin can be changed independently using separate properties. A short hand margin property can also be used, to change all margins at once.

  6. Margin Possible Values Value Description • Auto The browser calculates a margin • Length Specifies a margin in px, pt, cm, etc. Default value is 0px • % Specifies a margin in percent of the width of the containing element • Inherit Specifies that the margin should be inherited from the parent element

  7. Let’s Try <head> </head>

  8. Let’s Try <head> <style type=“text/css”> </style> </head>

  9. Let’s Try <head> <style type="text/css"> .main { background-color: yellow; margin: 100px 40px 60px 100px; } </style> </head>

  10. <body> <div class="main"> This is a paragraph with specified margins. </div> </body>

  11. Assignment Create the below class: 1st class called main: background-color > yellow; margin: 100px 40px 60px 100px; width > 600px; height > 100px;

  12. .main { background-color: yellow; margin: 100px 40px 60px 100px; width:600px; height:100px }

  13. 2nd class called main2: background-color > red; margin> 20px 50px 60px 100px; width > 700px; height > 100px;

  14. Assignment Create the below class: 3rd class called main3: background-color > green; margin> 10px 30px 20px 80px; width > 800px; height > 100px;

  15. Then between the <body> and </body>, add <div> Hi </div> <div> Hi </div> <div> Hi </div> Each one carries a different class.

More Related