When you change the padding(top, bottom), it also changes (add 10px) the height of the background. How can I fix this? Vertically, it seems to work well.
http://jsfiddle.net/VyYB7/3/
I have added padding to my text/content.
Try using margin instead (or in addition) of padding, like so:
margin: 10px 0;
EDIT
To use both padding and margin (so that the text will be padded):
margin: 10px 10px;
padding: 0 10px;
Check out the CSS background-origin and background-clip properties. Set them to whatever works to get your background anchored in the right place (probably content-box for both).
Related
So, i have simple css but big problem...
.separator a img {
width: 100%;
height: auto;
padding: 12px;
}
And the result is: this
As you can see on the image, shadow is showing on padding of the image but i want it to show on the image.
I want to do this but also to keep the padding.
Any ideas?
You're looking for the margin CSS property. Padding goes on the inside of the border-box, whereas margin goes outside.
Since the shadow is (I'm assuming) applied via box-shadow, the margin will be outside of it and the shadow will display directly adjacent to the image.
Try changing padding: 12px to margin: 12px.
Try using margin instead of padding. Think of padding as being 'inside' the box, and margin as being the space between the box and other things on the page.
which is causing things to look sloppy.
There is a div which expand to 100%, but the right border is cut off.
See the dev site here - it is under Feed
https://frozen-dusk-2587.herokuapp.com/
Here in image of me toggling the border using Chrome Dev Tools:
and here it is with me toggling on the border:
This is the default behaviour for all box-sizing:content-box elements, which is the default value for all elements. add box-sizing:border-box; to #at_view. This causes the browser to include border and padding in relative width calculations.
If you define an element with a width of 100% and also a border, the border is added to the 100% so this makes the total width more than 100% which is causing your problem (read up on the css box-model: http://www.w3schools.com/css/css_boxmodel.asp).
So one solution is that you could change the width of #at_view to less than 100%, try 90-95% - until things look right.
Or to be very specific, you can define #at_view width as 100% and subtract the border using calc():
#at_view {
width: calc(100% - 20px);
}
(Subtracting 20px, since it looks like 20px is the width being added by the border, as the border is 10px --> 10px on the left + 10px on the right = 20px.)
Even such basic things as the box model can be modified using CSS Rules.
See
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
to change the default behavior of the box model:
#at_view{
box-sizing:border-box;
}
Is there a way to have the padding on an element be added to the min-height value instead of being included in it? For example you have 10px of padding on the top and bottom a element and a min-height of 150px the height should be 170px instead of the element's height being 130px + 20px of padding.
I'm currently building a site using Material Design Lite and it adds padding to almost everything so it's a bit of a pain to have to always find the padding on something when you want to set a min-height value.
I might be a little late, but setting box-sizing: content-box; on the element would solve the issue.
When a box-shadow is applied to an element the corners are less "thick" than the middle because they don't have shadow on both sides. This creates an odd effect on full width elements.
http://jsfiddle.net/kevincox/6FhYe/18/
If you look at that example you will see that the edges are lighter. If the "banner" is at the top of a page you can spread it and shift it up but that doesn't work for the middle of the page as you can see the top.
I was wondering if anyone had a solution with no images and preferably cross-browser but I can deal with vendor prefixes for a bit. Is there something like a separate horizontal and vertical stretch?
One trick that seems to work is setting negative horizontal margins on the element, so that its ends extend outside the page, and adjusting the padding to compensate. Using your jsFiddle as an example, try changing the CSS to:
h1 {
margin: 20px -20px;
padding: 10px 30px;
background-color: #AFA;
box-shadow: 0 0 10px black;
}
Take a look at this updated jsfiddle
Each number in the shadows represents the following
The horizontal offset of the shadow, positive means the shadow will
be on the right of the box, a negative offset will put the shadow on
the left of the box.
The vertical offset of the shadow, a negative one means the
box-shadow will be above the box, a positive one means the shadow
will be below the box.
The blur radius (optional), if set to 0 the shadow will be sharp,
the higher the number, the more blurred it will be.
The spread radius (optional), positive values increase the size of
the shadow, negative values decrease the size. Default is 0 (the
shadow is same size as blur).
Color
Applying border-radius also fixes this issue (but obviously it depends on whether you want that in your design).
h1 {
margin: 10px;
padding: 10px;
border-radius: 10px;
background-color: #AFA;
box-shadow: 1px 0 10px black;
}
I've tried the CSS below. All of the other specifications are working except the width. You can see an example of the being too wide here if you need to.
Thanks for your help - Tara
.title h2 {
margin:10px 0 0 0;
width:780px;
font-family: HarabaraHandItalic;
font-size: 30px;
padding: 0 0 0 15px;
color:#000;
}
The width you're using is too wide. Try to make the width 750px for example. You'll see that it works fine!
Keep in mind that the padding will be added to the width of the element.
In your case the h2 element is 780px (width) + 15px (padding-left) = 795px.
It is working fine here.
I suspect you are being confused about what width means. The property describes the content width. The padding (15px) and borders (0px) and margin (0) all appear around the width.
The container is only 670px wide anyway, so you probably don't want something that is 795px across (width plus padding) inside it.
You need to reduce both the "width" and the "font-size" to make it fit.
Or, if the font-size needs to stay the same, you need to reduce the amount of copy.