Margin Left

CSS Margins

Margins are used to create space around elements, outside of any defined borders.

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Margin — Individual Sides

CSS has properties for specifying the margin for each side of an element:

All the margin properties can have the following values:

• auto — the browser calculates the margin
• length — specifies a margin in px, pt, cm, etc.
• % — specifies a margin in % of the width of the containing element
• inherit — specifies that the margin should be inherited from the parent element

Tip: Negative values are allowed.

Example

Set different margins for all four sides of a

element:

Margin — Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

If the margin property has four values:

• margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

  Example

  Use the margin shorthand property with four values:

  If the margin property has three values:

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

    Example

    Use the margin shorthand property with three values:

    If the margin property has two values:

    • margin: 25px 50px;
      • top and bottom margins are 25px
      • right and left margins are 50px

      Example

      Use the margin shorthand property with two values:

      If the margin property has one value:

      Example

      Use the margin shorthand property with one value:

      The auto Value

      You can set the margin property to auto to horizontally center the element within its container.

      The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

      Example

      The inherit Value

      Example

      div <
      border: 1px solid red;
      margin-left: 100px;
      >

      All CSS Margin Properties

      Property	Description
      margin	A shorthand property for setting all the margin properties in one declaration
      margin-bottom	Sets the bottom margin of an element
      margin-left	Sets the left margin of an element
      margin-right	Sets the right margin of an element
      margin-top	Sets the top margin of an element

      Источник

      Adding color to margins in CSS

      As we discussed above it is not possible to apply different colors but you can vary margin from box model by setting the background color of the html page to different color and margin color by default in white color. If we want to apply only margin side margin then CSS provides predefined properties. margin-left: 10px: apply margin 10px to left side.

      Adding color to margins in CSS

      I’m using this code to center/position a fixed width image as my background. I need to add color around the image that fills the margins in the browser window. I’ve tried background color, border color.

      So, the width of the image is 1050px. If the browser window is 1500px I want to make the remaining area black (for instance). How can I do this?

      First: put the div INSIDE your body . Then you can just edit your body background like this:

      Your HTML is invalid, you should not have a div tag enclosing the body tag. If you put the div within the body you should be able to simply set the background color of the body .

      In your html you should do something like this:

      You should never enclose the BODY in DIV

      If you are wanting to know how to color a border in CSS it would be

      border-width: 10px; border-color: #000; border-style: solid; 

      How to Style a Checkbox with CSS, Style the label with the width, height, background, margin, and border-radius properties. Set the position to «relative». Style the «checkbox-example» class by setting the display to «block» and specifying the width and height properties. Then, specify the border-radius, transition, position, and other properties.

      CSS Margin Color

      Introduction to CSS Margin Color

      The following article provides an outline on CSS margin Color. The margin property in HTML gives space around the outermost element’s content of the box-like structure. Margin is creating space beyond the box model elements. So, we cannot apply color to the margin. If our requirement still applies color around the elements, instead of margin you can use padding.

      The padding property in html gives space around the innermost element’s content of the box-like structure. The space around padding and margin is called a border.

      The difference between the padding, margin, and border you can observe below:

      

      • As we know common styles in all the pages we always preferred CSS over HTML.
      • So, in this tutorial, all common properties are implemented in CSS only.
      • As we discussed above it is not possible to apply different colors but you can vary margin from box model by setting the background color of the html page to different color and margin color by default in white color.

      Syntax

      div
      <
      margin: 10px;
      background: black;
      >

      Margin can be applied to the top, right, bottom and left side.

      div
      <
      margin: 10px,10px,10px,10px; //margin positions
      >

      Explanation: If we apply margin with 4 values then the first value is for top, the second value is for right, the third value is for the bottom and the fourth value is for left applied respectively.

      div
      <
      margin: 10px,10px,10px; //margin positions
      >

      Explanation: If we apply margin with 3 values then the first value is for top, the second value is for left and right, the third value is for bottom applied respectively.

      div
      <
      margin: 10px,10px; //margin positions
      >

      Explanation: If we apply margin with 2 values then the first value is for the top and bottom and the second value is for left and right applied respectively.

      div
      <
      margin: 10px; //margin positions
      >

      Explanation:

      • If we apply margin with only single values then applied it for all four sides equally.
      • If we want to apply only margin side margin then CSS provides predefined properties.
      • margin-left: 10px: apply margin 10px to left side.

      margin -right: 10px: apply margin 10px to right side.

      margin -top: 10px: apply margin 10px to top side.

      margin -bottom: 10px: apply margin 10px bottom side.

      Examples of CSS Margin Color

      Given below are the examples of CSS Margin Color:

      Example #1: Applying margin from the left side

      
      

      
      
      

      Without Margin

      Just, varying margin from box model
      with defalt white color. We can’t apply special color to margin. If
      we want to apply colors around the text we can use border or padding
      with different colors.

      With Margin

      Just, varying margin from box model
      with defalt white color. We can’t apply special color to margin. If
      we want to apply colors around the text we can use border or padding
      with different colors.

      
      

      .margin2
      <
      border: 1px solid black;
      margin-left:100px;
      background: brown;
      >
      .margin1
      <
      border: 1px solid black;
      background: brown;
      >

      

      Explanation:

      Example #2: Applying margin from the right side

      
      

      
      
      

      Without Margin

      Just, varying margin from box model
      with defalt white color. We can’t apply special color to margin. If
      we want to apply colors around the text we can use border or padding
      with different colors.

      With Margin

      Just, varying margin from box model
      with defalt white color. We can’t apply special color to margin. If
      we want to apply colors around the text we can use border or padding
      with different colors.

      
      

      .margin2
      <
      border: 1px solid black;
      margin-right:100px;
      background: fuchsia;
      font-size: 25px;
      >
      .margin1
      <
      border: 1px solid black;
      background: fuchsia;
      font-size: 25px;
      >

      

      Explanation:

      Example #3: Applying margin from the top side

      
      

      Without Margin

      Just, varying margin from box model
      with defalt white color. We can’t apply special color to margin. If
      we want to apply colors around the text we can use border or padding
      with different colors.

      With Margin

      Just, varying margin from box model
      with defalt white color. We can’t apply special color to margin. If
      we want to apply colors around the text we can use border or padding
      with different colors.

      .margin2
      <
      border: 1px solid black;
      margin-top:100px;
      background: lime;
      font-size: 25px;
      >
      .margin1
      <
      border: 1px solid black;
      background: lime;
      font-size: 25px;
      >

      

      Explanation:

      Example #4: Applying margin from the bottom side

      
      

      
      
      

      With Margin

      Just, varying margin from box model
      with defalt white color. We can’t apply special color to margin. If
      we want to apply colors around the text we can use border or padding
      with different colors.

      Without Margin

      Just, varying margin from box model
      with defalt white color. We can’t apply special color to margin. If
      we want to apply colors around the text we can use border or padding
      with different colors.

      
      

      .margin2
      <
      border: 1px solid black;
      margin-bottom:100px;
      background: gray;
      font-size: 25px;
      >
      .margin1
      <
      border: 1px solid black;
      background: gray;
      font-size: 25px;
      >

      

      Explanation:

      Conclusion

      We can’t apply different colors to margin because it’s beyond its elements box. We just varied the margin from elements with making background to different colors and margin to white color.

      Final thoughts

      This is a guide to CSS Margin Color. Here we discuss the basic concept with different examples of CSS margin color with code implementation and output. You may also have a look at the following articles to learn more –

      CSS border-top-color property, The border-top-color property sets the color of an element’s top border. Note: Always declare the border-style or the border-top-style property before the border-top-color property. An element must have a border before you can change the color. Show demo Default value: The current color of the element: Inherited: no: …

      CSS — background-color including margin

      I am trying to create a horizontal navigation menu. The menu needs to be full screen width, with a border bottom running the whole width too. I have more or less acheived this apart from I would like to have a margin of about 15px under the menu, and for this to use the background color of my menu. Also when an item is hovered, the hover color should extend under the border too if that makes sense.

      Here is a fiddle of my menu so far — http://jsfiddle.net/J74eE/2/

      Tried to insert my code here but the li items got converted to bullets 

      I have set a margin under the container nav, and I would like the border color to be used on the margin area too. I would also like to somehow have the li items hover color to extend under the border too but I have no idea how this might be acheived. If I put the margin and border on the li items the border won’t run the full width of the screen.

      Updated my fiddle to include a mock-up of what I want to acheive — http://jsfiddle.net/J74eE/3/

      I can’t use padding as that pushes the border-bottom down, and I want to have a border with background-color underneath it.

      Try to replace your margin by a padding. See more at box model: http://www.w3.org/TR/CSS2/box.html

      I hope you are looking for this: DEMO

      You can use after and before pseudo classes for your desired result.

      Adding color to margins in CSS, If you are wanting to know how to color a border in CSS it would be. border: 10x solid #000; or. border-width: 10px; border-color: #000; border-style: solid; Share . Follow edited Jun 21, 2012 at 0:19. Derek 朕會功夫. 89k 41 41 gold badges 175 175 silver badges 241 241 bronze badges. answered Jun 20, 2012 at 23:54. Steven Mcsorley Steven Mcsorley. 71 1 1 gold badge 1 1 silver badge 7 7 Code samplebodyFeedback

      Источник
    Читайте также:  Php get the timestamp