If your margin is set on the body, then setting the background color of the html tag should color the margin area

    html { background-color: black; }
    body { margin:50px; background-color: white; }

http://jsfiddle.net/m3zzb/

Or as dmackerman suggestions, set a margin of 0, but a border of the size you want the margin to be and set the border-color


Instead of using a margin, could you use a border? You should do this with `&lt;div&gt;`, anyway.

Something like this?![enter image description here][1]


  [1]: http://i.stack.imgur.com/qUxsf.png

http://jsfiddle.net/GBTHv/

I needed something similar, and came up with using the :before (or :after) pseudoclasses:

    #mydiv {
       background-color: #fbb;
       margin-top: 100px;
       position: relative;
    }
    #mydiv:before {
       content: &quot;&quot;;
       background-color: #bfb;
       top: -100px;
       height: 100px;
       width: 100%;
       position: absolute;
    }

[JSFiddle][1]


  [1]: http://jsfiddle.net/m9kv02gu/1/

That is not possible du to the Box Model.
However you could use a workaround with css3&#39;s border-image, or border-color in general css.

However im unsure whether you may have a problem with resetting.
Some browsers do set a margin to html as well. See Eric Meyers Reset CSS for more!

    html{margin:0;padding:0;}

Are you possibly looking to change the margin color outside the border?  Maybe https://www.w3schools.com/css/css_outline.asp[outline][1] outline will help? Particularly 

    outline-color: green;


  [1]: https://www.w3schools.com/css/css_outline.asp

How do you get your template/view to recognize whether or not a logged in user is a super user or not? 

There are certain buttons on my forms (in the template) that I want completely hidden if the user is not a super-user

How would you go about doing that?

Django: Hide button in template, if user is not super-user

Consider:

    &lt;?php
       define(&#39;my_const&#39;, 100);
       echo &lt;&lt;&lt;MYECHO
          &lt;p&gt;The value of my_const is {my_const}.&lt;/p&gt;
    MYECHO;
    ?&gt;

If I put a variable inside the braces, it prints out. But not the constant. How can I do it?





Interpolate a constant (not variable) into &#39;heredoc&#39;

I have searched for an answer but couldn&#39;t find it anywhere. My question is reasonably simple: I have a background color of my body, then a large margin, and now I want a different background color **inside** the margin.

How do I do that with CSS?

CSS: background-color only inside the margin

I have searched for an answer but couldn't find it anywhere. My question is reasonably simple: I have a background color of my body, then a large margin, and now I want a different background color inside the margin.
How do I do that with CSS?

Given this simple structure:

    &lt;div id=&quot;parent&quot;&gt;
        &lt;div id=&quot;child&quot;&gt;Lorem ipsum&lt;/div&gt;
    &lt;/div&gt;

with this CSS:

    #parent {
        width: 200px;
        height: 200px;
        padding: 20px;
        overflow-x: scroll;
    }
    
    #child {
        width: 500px;      
    }

**Live demo:** http://jsfiddle.net/523me/5/

Notice that the parent has a `20px` padding and that the child overflows horizontally (because it is wider). If you scroll the parent all the way to the right, you&#39;ll see that the child touches the right edge of the parent.

So, the parent should have a right padding, but it is ignored. It seems that when the child has a fixed width, the right padding of the parent does not apply. (Is this specified by a standard? I would love to know. Please let me know if you find anything!)

Is there a way to force the right padding to be applied in this scenario *without* having to remove any of the elements from the flow (by floating or positioning)?

![enter image description here][1]

Screenshot 1 - The right padding is ignored. This is how all current browsers behave.  

Screenshot 2 - The right padding applies. This is what I&#39;m trying to accomplish. (Btw, the screenshot is from IE7, which is the only browser which does not ignore the right padding.)


  [1]: http://i.stack.imgur.com/UJNOL.png

When a child element overflows horizontally, why is the right padding of the parent ignored?

So, I need to make a repeating hexagonal pattern, using CSS. If images are needed, I can go there, but I&#39;d prefer to just use CSS if possible.

Here&#39;s an idea of what I&#39;m trying to create:

![enter image description here][1]


Basically, I just need a way to create the hexagonal shapes, and then overlay text/images on top of them. I don&#39;t have much code yet, because I&#39;m not really sure where to start. The problem is, I could just use `&lt;div&gt;`s in the shape of a hexagon like shown in ([http://css-tricks.com/examples/ShapesOfCSS/][2]), but then they wouldn&#39;t be connecting. I could use a repeating hexagon pattern, but then I wouldn&#39;t be able to specify the exact location of the text or images I need in specific shapes. Thanks for any help in advance.


  [1]: http://i.stack.imgur.com/uXKx1.png
  [2]: http://css-tricks.com/examples/ShapesOfCSS/

Generate repeating hexagonal pattern with CSS3

I&#39;m coding up a page where I only want to use raw JavaScript code for UI without any interference of plugins or frameworks.

And now I&#39;m struggling with finding a way to scroll over the page smoothly without jQuery.

Smooth scroll without the use of jQuery

i have some code for example here in html

    &lt;html&gt;
     &lt;body&gt;
      &lt;img src=&#39;an image source&#39;/&gt;
      &lt;h1&gt;Hi it&#39;s test&lt;/h1&gt;
      &lt;div id=&#39;mydiv&#39;&gt;
        &lt;img src=&#39;an image source&#39;/&gt;
        &lt;h1&gt;Hi it&#39;s test&lt;/h1&gt;
      &lt;/div&gt;
     &lt;/body&gt;
    &lt;/html&gt;

if i used the following css code for styling it:

    img{
       width:100px;
       height:100px;
    }
    h1{
       font-size:26px;
       color:red;
    }

the question is : How can i prevent and isolate the tags inside the mydiv div tag from styling by the public tags style ?

How To Isolate a div from public CSS styles?

In my site I need to make a div have rounded corners only on the top corners.  But I don&#39;t know how to do this. Can someone help me?

How do I make corners rounded only on the top part of the border in css?

I have a page that has an image in it and I styled it using :before CSS selectors.  
The image is dynamic so it hasn&#39;t a fixed width; So I need to set :before rule&#39;s width dynamically.  
I want do it in client side using JQuery.  
Assume this:  

    .column:before{
    	width: 300px;
    	float: left;
    	content: &quot;&quot;;
    	height: 430px;
    }
    
    .column{
    	width: 500px;
    	float: right;
    	padding: 5px;
    	overflow: hidden;
    	text-align: justify;
    }

How Can I only change the width property of class with `:before` selector (and not one without it) using JQuery?  



Changing width property of a :before css selector using JQuery

Let&#39;s say I&#39;ve got a div that has a width of 50% of the body. How do I make its height equal to that value? So that when the browser window is 1000px wide, the div&#39;s height and width are both 500px.


Can I set the height of a div based on a percentage-based width?

A common trick for vertical positioning elements is to use the following CSS:

    .item {
        position:absolute;
        top:50%;
        margin-top:-8px; /* half of height */
        height: 16px;
    }

When seen in the metric view as in Chrome this is what you see:

![enter image description here][1]

However, there is no visual margin depicted when you hover over the element i.e. the margin is &#39;outside&#39; the border and can be visualized. But negative margins don&#39;t show up. How do they look and what is it that makes it different?

Why is `margin-top:-8px` *not the same as* `margin-bottom:8px`?

So just how do negative margins work and what&#39;s the intuition behind them. How do they &#39;bump up&#39; (in case of `margin-top &lt; 0`) an item?


  [1]: http://i.stack.imgur.com/E7RGt.png

How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

I am trying to make two divs, one inside the other. The inner div is larger than the outer div, the outer div has `overflow:scroll`, and the inner div has `margin:25px`. So I do this:

    #outer {
        width: 200px;
        height: 100px;
        overflow: scroll;
    }
    #inner {
        width: 400px;
        height: 200px;
        margin: 25px;
    }
...

    &lt;div id=&quot;outer&quot;&gt;
        &lt;div id=&quot;inner&quot;&gt;
        
        &lt;/div&gt;
    &lt;/div&gt;

Instead of the inner div having a margin of 25px all the way around as expected, there is a 25px margin on THREE sides, but on the right side there is none. This is extremely counter-intuitive in my opinion.

If I add a middle div with a width large enough width to contain the inner div + 50px, we can make it look right, but that seems like a hacky workaround.

See my example on JSFiddle: http://jsfiddle.net/d3Nhu/16/

This happens the same way in every major browser. Is there any good reason for this behavior? Is this correct behavior according to the CSS specification?

NOTE: As you&#39;d expect in this example, it makes no difference if you use `overflow:auto` instead of `overflow:scroll`.

**EDIT**: Please note that I&#39;m *not* looking for a workaround for this behavior. (I already found one.) I&#39;m looking for any insight as to the *reason* for this behavior, especially if it is documented in the [CSS specification](http://www.w3.org/TR/CSS21/) anywhere.

CSS Right Margin Does Not Work Inside a Div With Overflow Scroll

Can someone tell me what I coded wrong? Everything is working, the only thing is that there is no margin at the top.

**HTML**:

    &lt;div id=&quot;contact_us&quot;&gt; &lt;!-- BEGIN CONTACT US --&gt;
	  &lt;span class=&quot;first_title&quot;&gt;Contact&lt;/span&gt;
      &lt;span class=&quot;second_title&quot;&gt;Us&lt;/span&gt;
	  &lt;p class=&quot;content&quot;&gt;For any questions whatsoever please contact us through the following e-mail address:&lt;/p&gt;&lt;/br&gt;&lt;/br&gt;
	  &lt;p class=&quot;e-mail&quot;&gt;info@e-mail.com&lt;/p&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;&lt;/br&gt;
   	  &lt;p class=&quot;read_more&quot;&gt;&lt;a href=&quot;underconstruction.html&quot;&gt;Read More&lt;/a&gt;&lt;/p&gt;
	&lt;/div&gt; &lt;!-- END CONTACT US --&gt;

**CSS**:

&lt;!-- language: lang-css --&gt;

    span.first_title {
      margin-top: 20px;
      margin-left: 12px;
      font-weight: bold;
      font-size: 24px;
      color: #221461;
    }
	
    span.second_title {
      margin-top: 20px;
      font-weight: bold;
      font-size: 24px;
      color: #b8b2d4;
    }	

Margin-Top not working for span element?

My css margins doesn&#39;t behave the way I want or expect them to. I seems like my header margin-top affect the div-tags surrounding it.

**This is what I want and expect:**
![What I want....][1]

**...but this is what I end up with:**
![What I get...][2]

**Source:**

    &lt;!doctype html&gt;
    &lt;html&gt;
    &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Margin test&lt;/title&gt;

    &lt;style type=&quot;text/css&quot;&gt;
    body {
    	margin:0;
    }
    #page {
    	margin:0;
    	background:#FF9;
    }
    #page_container {
    	margin:0 20px;
    }
    h1 {
    	margin:50px 0 0 0;
    }
    &lt;/style&gt;
    
    &lt;/head&gt;
    
    &lt;body&gt;
    
    &lt;div id=&quot;page&quot;&gt;
    	&lt;div id=&quot;page_container&quot;&gt;
    		&lt;header id=&quot;branding&quot; role=&quot;banner&quot;&gt;
    			&lt;hgroup&gt;
    				&lt;h1 id=&quot;site-title&quot;&gt;&lt;span&gt;&lt;a href=&quot;#&quot; title=&quot;Title&quot; rel=&quot;home&quot;&gt;Title&lt;/a&gt;&lt;/span&gt;&lt;/h1&gt;
    				&lt;h2 id=&quot;site-description&quot;&gt;Description&lt;/h2&gt;
    			&lt;/hgroup&gt;
    		&lt;/header&gt;
    	&lt;/div&gt;
    &lt;/div&gt;

I have exaggerated the margin in this example. Default browser margin on h1-tag is somewhat smaller, and in my case I use *Twitter Bootstrap, with Normalizer.css* which sets default margin to 10px. Not that important, main point is; I can not, should not, *want not* change the margin on the h1-tag.

I guess it is similar to my other question; *[Why does this CSS margin-top style not work?][3]*. Question is how do I solve this specific issue?

I have read [a few threads][4] on similar problems, but haven&#39;t found any real answers and solutions. I know adding `padding:1px;` or `border:1px;` solves the problem. But that only adds new problems, since I do not want a padding nor a border on my div-tags.

There must be a better, best practice, solution? This must be pretty common.


  [1]: http://i.stack.imgur.com/Uf7E7.png
  [2]: http://i.stack.imgur.com/xQPuv.png
  [3]: https://stackoverflow.com/q/9519841/266642
  [4]: https://stackoverflow.com/q/7742720/266642

CSS margin terror; Margin adds space outside parent element

I can get height in jQuery with
    
    $(item).outerHeight(true);

but how do I with JS?  



I can get the height of the li with

    document.getElementById(item).offsetHeight

but i will always get &quot;&quot; when I try margin-top:

    document.getElementById(item).style.marginTop

How to get margin value of a div in plain JavaScript?

What&#39;s the difference between specifying a background color using `background` and `background-color`?

**Snippet #1**

    body { background-color: blue; }

**Snippet #2**

    body { background: blue; }

What is the difference between background and background-color

My Eclipse javadoc view has a black background which makes it look [terrible][] and partly unreadable (e.g. links are dark blue on black). Even worse, the javadoc popup has black background, too. I can&#39;t find the corresponding setting.

The answer by Sumit Singh showed me how to change the background for the javadoc view. However, I still see no way how to change the foreground. Even worse, the javadoc popup background color didn&#39;t change.

I don&#39;t think it&#39;s caused by a plugin, as it happens with a fresh install, too. This happens on Ubuntu 10.4. In Windows the colors can&#39;t be changed either, but there are fine.

[terrible]: http://dl.dropbox.com/u/4971686/published/120430/eclipse-javadoc-background.png


Eclipse javadoc background color is black

I am adding to my layout a WebView to display justified text. I want to set the background of the WebView to be transparent to appear like a textView. Here&#39;s what I did:

    WebView synopsis;
    synopsis=(WebView)findViewById(R.id.synopsis);
    synopsis.setBackgroundColor(0x00000000);

It works on the emulator, but when I run the application on my device it doesn&#39;t work: what I get is a white background.

     String textTitleStyling = &quot;&lt;head&gt;&lt;style&gt;* {margin:0;padding:0;font-size:20; text-align:justify; color:#FFFFFF;}&lt;/style&gt;&lt;/head&gt;&quot;;
     String titleWithStyle = textTitleStyling + &quot;&lt;body&gt;&lt;h1&gt;&quot; + movie.synopsis + &quot;&lt;/h1&gt;&lt;/body&gt;&quot;;
     synopsis.loadData(textTitleStyling + movie.synopsis, &quot;text/html&quot;, &quot;utf-8&quot;);
     synopsis = (WebView) findViewById(R.id.synopsis);
     synopsis.getSettings();
     synopsis.setBackgroundColor(0);

Android WebView background color

I have the following Sass mixin, which is a half complete modification of an **RGBa example**:

&lt;!-- language: lang-css --&gt;

    @mixin background-opacity($color, $opacity: .3) {
        background: rgb(200, 54, 54); /* The Fallback */
        background: rgba(200, 54, 54, $opacity);
    } 

I have applied `$opacity` ok, but now I am a stuck with the `$color` part. 
The colors I will be sending into the mixin will be HEX not RGB.

My example use will be:

&lt;!-- language: lang-css --&gt;

    element {
        @include background-opacity(#333, .5);
    }

How can I use HEX values within this mixin?


Sass - Converting Hex to RGBa for background opacity

I&#39;m not using CSS3. So I can&#39;t use `opacity` or `filter` attributes. Without using these attributes how can I make the `background-color` transparent of a `div`? It should be kind of the text box example in this [link][1]. Here the text box background color is transparent. I want to make the same, but without using the above mentioned attributes.


  [1]: http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency

Content Type	Original Author	Original Content on Stackoverflow
Question	user1318194	View Question on Stackoverflow
Solution 1 - Html	Erik Funkenbusch	View Answer on Stackoverflow
Solution 2 - Html	dmackerman	View Answer on Stackoverflow
Solution 3 - Html	rlv-dan	View Answer on Stackoverflow
Solution 4 - Html	worenga	View Answer on Stackoverflow
Solution 5 - Html	Katherine Langley	View Answer on Stackoverflow

CSS: background-color only inside the margin

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Solution 5 - Html

Interpolate a constant (not variable) into 'heredoc'

Django: Hide button in template, if user is not super-user

Attributions