Stuffed Marshmallow Stuffed Marshmallow - 1 year ago 85
CSS Question

Decrease Box-Shadow Margin Without Changing Content Margin

I have a simple bootstrap website with the content surrounded by a drop-shadow. I am trying to place the left and right drop-shadow closer towards the window borders to make the content look less crammed. I am not wanting to increase the shadow radius, I just want the shadow sides to be placed closer to the left and right border.

Here's what it looks like: Border is too close to content.

Here is my HTML:

<div class="dropshadow">
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">

Here is my CSS:

<link rel="stylesheet" href="">

.dropshadow {
display: table;
margin: 0 auto;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);

When I try to add padding or change the left and right margins of .dropshadow, I mess up the content's placement. I want the content to stay where it is. I would prefer to keep it as display: table, unless you think there is something better.

Here is fiddle:

Make sure you increase window width large enough for the box-shadow to appear, it's not a problem on my website because I don't display it on mobile view.

Answer Source

Are you trying to center-align your div.dropshadow?

margin: 0 auto; helps you do that. If you change from auto to a value, then your div will be automatically left-aligned. (padding doesn't affect the alignment of div.dropshadow)

One solution is: set padding (ex padding: 0 50px) for the parent of your div.dropshadow (right now it is < body >),

and set display: block for yourdiv.dropshadow.

Please try it in you project. Looks like it works in the fiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download