How to Add Background Color Only for Padding

Can I add background color only for padding?

Another option with pure CSS would be something like this:

nav {
    margin: 0px auto;
    width: 100%;
    height: 50px;
    background-color: white;
    float: left;
    padding: 10px;
    border: 2px solid red;
    position: relative;
    z-index: 10;
}

nav:after {
    background-color: grey;
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: -1;
}

<nav>Some text or anything</nav>

How to fill the background-color only for padding for Bootstrap's container-fluid?

Using absolute positioning :after also background-clip & background-image.

Solution 1: using background-clip & background-image

.container-fluid {  padding: 0 120px;  background-clip:  content-box, padding-box;  background-image: linear-gradient(to bottom, white 0%, white 100%), linear-gradient(to bottom, grey 0%, grey 100%); }

.content {  height: 1000px;}

<div class="container-fluid">  <div class="row content">    <div class="col-12">      Content    </div>  </div></div>

Can I set a background-color to margins and padding?

It's not possible to set the background-colors of the padding and margin attributes. They are meant to be transparent, or invisible, and used solely for positioning purposes.

However, I have heard this question many times, and I completely understand wanting to show the padding and margins for purely educational purposes. Therefore, I have created a simple little "hack" to represent the box-model, using CSS's :before and :after psuedo-elements.

You can't color padding, or margins, but let me suggest a little hack to make it look like you can (without JavaScript!):

simulated box-model:

#box {  width: 150px;  height: 150px;  background: green;  position: relative;  border: 10px solid blue;  left: 50px;  top: 50px;}#box:before {  background: red;  content: 'border';  display: block;  position: absolute;  top: -30px;  left: -30px;  right: -30px;  bottom: -30px;  z-index: -1;}#box:after {  background: gray;  content: 'margin';  display: block;  position: absolute;  top: -50px;  left: -50px;  right: -50px;  bottom: -50px;  z-index: -2;}

<div id="box">#box</div>

How to background a div without the padding area

If you are able to access the HTML try:

.mgmtError {  width: 716px;  float: left;  padding: 10px;  text-align: center;  background-color: blue;}
.mgmtError div {  background-color: #FF0000;}

<div class="mgmtError">  <div>Content</div></div>

How to add background image or color on padding

Edit - Update:

Well, you basically want the padded area to have a background color, without changing the padding.

The simplest solution I could think of is:

Wrap the whole 'back end' with a fixer class, and give it a background color.

html:

<!DOCTYPE html>
<hhttp://jsfiddle.net/SjYyj/#forktml lang="en">

    <head>
        <title>Home</title>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"
        rel="stylesheet">
    </head>

    <body>
        <div class="fixpadding"><!--Fixer-->
            <div class="container">
                <div class="navbar1 navbar navbar-inverse">
                    <div class="navbar-inner">
                        <ul class="nav pull-right">
                            <li><a href="#">sign in</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--/container-->
            <div class="container">
                <div class="row-fluid">
                    <div class="header">
                        <div class="span12">
                                <h1> Hello World</h1>

                        </div>
                    </div>
                    <!--/inner-wrapper-->
                </div>
                <!--/row-fluid-->
            </div>
            <!--/container-->
        </div>
        <!--End Fixer-->
        <script src="./js/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
    </body>

    </html>

css:

.header {
    background-color: grey;
}
.fixpadding {
    background-color: grey;
    border-radius:4px 4px 0 0; /* Fine-tuning with nav bar */
}

Try it out.

Edit 2:

You may see that if you resize the window, the background color will "spread-out" .
To fix this, I've warped all of the body with a container, and set some more css:

html:

<div class="container">
        <div class="fixpadding">
        ...
        </div>
<!--End Fixer-->
</div>

css:

.header {
    background-color: grey;
}
.fixpadding {
    background-color: grey;
    background-size: contain;
    border-radius:4px 4px 0 0;/* Fine-tuning with nav bar*/
}

Check it out.

Edit 3:

You can't color a padded area specifically.

I made some changes to show you what you could do:

Try it here.

The red and green colors are there so you could see the impact.

I've hard-coded the css into the html so you won't need to hassle with the selectors.

HTML:

<!DOCTYPE html>
<hhttp://jsfiddle.net/SjYyj/#forktml lang="en">
<head>
    <title>Home</title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>
  <div class="container" style="background-color:red;border-radius:4px 4px 0 0;">
    <div class="navbar1 navbar navbar-inverse">
        <div class="navbar-inner">
            <ul class="nav pull-right">
                <li><a href="#">sign in</a></li>
            </ul>
        </div>
    </div>
</div><!--/container-->

<div class="container" style="background-color:green;">
    <div class="row-fluid">
        <div class="header">
            <div class="span12">
                <h1> Hello World</h1>
            </div>
        </div><!--/inner-wrapper-->
    </div><!--/row-fluid-->
</div><!--/container-->
<script src="./js/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

</body>

</html>

Why doesn't margin get filled with background color in CSS?

You should use padding instead of margin as described by CSS's Box Model.

Margin is providing space beyond the element's box and therefore won't be colored - it's simply space.
Padding on the other hand provides space around the inside of the element's box and is colored and affected by other styles.

<!doctype html><html>          <head>     <style>        #footer {           background: #263238;           padding: 100px;        }        .footer-text {           margin: 0;           color: #fff;        }     </style>  </head>      <body>     <div id="footer">        <div class="footer-text">All Rights Reserved © 2016</div>     </div>  </body>    </html>

Color a div without coloring the padding area

You can use

background-clip: content-box;

How to add padding to background color of text widget

You can use a Paint for the background of TextStyle:

Text(
  'Random caption for this post1',
  style: TextStyle(
    fontWeight: FontWeight.bold,
    background: Paint()..color = Colors.white
    ..strokeWidth = 17
    ..style = PaintingStyle.stroke,
  ),
  textAlign: TextAlign.center,
)

Result:

CSS: background-color only inside the margin

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