Presentation is loading. Please wait.

Presentation is loading. Please wait.

CSS Margins. The Margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom,

Published byEdgar Powell Modified over 8 years ago

Similar presentations

Presentation on theme: "CSS Margins. The Margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom,"— Presentation transcript:

1 CSS Margins

2 The Margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.

3 Margin Property The margin property is a shorthand property for setting all of the properties for the four margins in one declaration. Note: Negative values are allowed. Inherited: No

4 Example h1 {margin: 10px} all four margins will be 10px h1 {margin: 10px 2%} top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. h1 {margin: 10px 2% -10px} top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px h1 {margin: 10px 2% -10px auto} top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be - 10px, left margin will be set by the browser

5 Possible Values ValueDescriptionNNIE margin-top margin-right margin-bottom margin-left Sets the properties for the margins. The values comes in % (defines a margin in % of the total height/width of the document), length (defines a fixed margin), and auto (the browser sets a margin). 4.0

6 Browser Notes Note in IE 4.0+: This property does not work with inline elements The "margin-bottom" property does not work with table cells Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work properly with inline elements, input fields, images, and list items This property ignores the bottom margin declaration entirely if a top margin has been specified

7 Margin-Bottom Property The margin-bottom property sets the bottom margin of an element. Note: Negative values are allowed. Inherited: No

8 Example h1 { margin-bottom: 10px } h2 { margin-bottom: -20px }

9 Possible Values ValueDescriptionNNIE autoThe browser sets a bottom margin4.0 lengthDefines a fixed bottom margin4.0 %Defines a bottom margin in % of the total height of the document 4.0

10 Browser Notes Note in IE 4.0+: This property does not work with table cells or inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work with inline elements, input fields, images, and list items This property ignores negative values

11 Margin-Left Property The margin-left property sets the left margin of an element. Note: Negative values are allowed. Inherited: No

12 Example h1 { margin-left: 10px } h2 { margin-left: -20px }

13 Possible Values ValueDescriptionNNIE autoThe browser sets a left margin4.03.0 lengthDefines a fixed left margin4.03.0 %Defines a left margin in % of the total width of the document 4.03.0

14 Browser Notes Note in IE 4.0+: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work properly with inline elements, images, and list items This property ignores negative values on table cells

15 Margin-Right Property The margin-right property sets the right margin of an element. Note: Negative values are allowed. Inherited: No

16 Example h1 { margin-right: 10px } h2 { margin-right: -20px }

17 Possible Values ValueDescriptionNNIE autoThe browser sets a right margin4.03.0 lengthDefines a fixed right margin4.03.0 %Defines a right margin in % of the total width of the document 4.03.0

18 Browser Notes Note in IE 4.0+: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work properly with inline elements, images, and list items This property ignores negative values on table cells

19 Margin-Top Property The margin-top property sets the top margin of an element. Note: Negative values are allowed. Inherited: No

20 Example h1 { margin-top: 10px } h2 { margin-top: -20px }

21 Possible Values ValueDescriptionNNIE autoThe browser sets a top margin4.03.0 lengthDefines a fixed top margin4.03.0 %Defines a top margin in % of the total height of the document 4.03.0

22 Browser Notes Note in IE 4.0+: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0+: This property does not work with inline elements, images, and list items This property ignores negative values on inline elements, images, list items, and table cells

Download ppt "CSS Margins. The Margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom,"

Similar presentations

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.

CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.
Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.

Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.
Client-Side Internet and Web Programming

Client-Side Internet and Web Programming
With CSS, a color is most often specified by: a HEX value - like #ff0000 an RGB value - like rgb(255,0,0) a color name - like red“ Example h1.

With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ Example h1.
Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)

Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)
9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.

9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.
Today’s objectives Site performance Padding, Margins, Borders

Today’s objectives Site performance Padding, Margins, Borders
Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.

Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.
Tutorial 4: Creating page layout with css

Tutorial 4: Creating page layout with css
Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!

Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!
TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.3.

TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.3.
Using CSS for Page Layout. Types of HTML Elements Block-Level Element –Creates blocks of content e.g. div, h1..h6, p, ul, ol, li, table, form –They start.

Using CSS for Page Layout. Types of HTML Elements Block-Level Element –Creates blocks of content e.g. div, h1..h6, p, ul, ol, li, table, form –They start.
The Viewport body element w/ bg image body element w/ bg image wrapper.

The Viewport body element w/ bg image body element w/ bg image wrapper.
Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University.

Streamlining Website Development in Dreamweaver Roger L. Runquist Western Illinois University Roger L. Runquist Western Illinois University.
An Introduction to Cascading Style Sheets CSS Layout, and the CSS Box Model Nick Foxall SM5312 week 9: CSS Layout.

An Introduction to Cascading Style Sheets CSS Layout, and the CSS Box Model Nick Foxall SM5312 week 9: CSS Layout.
MORE Cascading Style Sheets (The Positioning Model)

MORE Cascading Style Sheets (The Positioning Model)
14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.

14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.
Slide 1 of 83 Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td.

Slide 1 of 83 Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td.
Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.

Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.

Similar presentations

Ads by Google