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.
Related
I am attempting to put some padding above an image so it's not directly against the text I have up there. The image has a border on it, and when I try to put the padding above it leaves the top part of the image's border up there. So there is an unwanted space above the image between the border. Can anyone help me? This is the css I am using:
img {
padding-top: 28px;
border:5px solid #e26b34;
}
Just use margin-top like below. Margin does basically the same thing as paddding, except padding is inside the element (inside the border) while margin is outside the element (outside the border).
You can find more about margin and padding here.
img {
margin-top: 28px;
border:5px solid #e26b34;
}
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
Is there a way to give a div element some padding INSIDE its border? For example, currently all the text inside my main div element goes right to the edge of the element's border. I'd like, as a general rule on this site, to have at least 10 to 20 px of space between the text and the border.
Here's a screen shot to illustrate what I currently have:
The CSS property you are looking for is padding.
The problem with padding is that it adds to the width of the original element, so if you have a div with a width of 300px, and add 10px of padding to it, the width will now be 320px (10px on the left and 10px on the right).
To prevent this you can add box-sizing: border-box; to the div, this makes it maintain the designated width, even if you add padding.
So your CSS would look like this:
div {
box-sizing: border-box;
padding: 10px;
}
you can read more about box-sizing and it's overall browser support here:
https://www.paulirish.com/2012/box-sizing-border-box-ftw/
I see a lot of answers here that have you subtracting from the width of the div and/or using box-sizing, but all you need to do is apply the padding the child elements of the div in question. So, for example, if you have some markup like this:
<div id="container">
<p id="text">Find Agents</p>
</div>
All you need to do is apply this CSS:
#text {
padding: 10px;
}
Here is a fiddle showing the difference: https://jsfiddle.net/CHCVF/2/
Or, better yet, if you have multiple elements and don't feel like giving them all the same class, you can do something like this:
.container * {
padding: 5px 10px;
}
Which will select all of the child elements and assign them the padding you want. Here is a fiddle of that in action: https://jsfiddle.net/CHCVF/3/
Just use div { padding: 20px; } and substract 40px from your original div width.
Like Philip Wills pointed out, you can also use box-sizing instead of substracting 40px:
div {
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
The -moz-box-sizing is for Firefox.
Padding is a way to add kind of a margin inside the Div.
Just Use
div { padding-left: 20px; }
And to mantain the size, you would have to -20px from the original width of the Div.
When I apply a margin to an element rather than extending its containing element it creates margin outside of it. So with the code below there is a space between the divs's coloured background.
Why does this happen? It would seem more logical to me for the containing div to be expanded (so im the code example there would be no white space and the coloured 'bars' would be fatter).
Is there a way with CSS I can stop it happening?
http://codepen.io/anon/pen/KrJgm
<div class="one">
<p>Text</p>
</div>
<div class="two">
<p>Text</p>
</div>
<div class="three">
<p>Text</p>
</div>
.one {
background: red;
}
.two {
background: green;
}
.three {
background: gold;
}
UPDATE Sorry I dont think I was clear. I understand that the margin on the paragraph tag is causing the white space but what I dont understand is why the margin isnt 'pushing back' the containing div (so it would look the same as if a padding had been applied to the containing div).
As you updated your question, I think whats troubling you is Collapsing Margins
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
Solution? Use overflow: auto; on the parent element.
Demo
If you are speaking about the white space in the demo as I am not seeing any margins used in your code.. Than below is the answer..
You are not resetting browser default styles..
Demo
* {
margin: 0;
padding: 0;
outline: 0; /* Optional */
}
Here I am using * selector which selects all the elements, and am using margin: 0; and padding: 0; to reset the browser defaults..
Some do not use * selector as they find it bad from a performance point of view, so if that's the case you can use CSS Stylesheet Reset
If you are using margins in your code than please refer this answer...
If you are aware of the CSS Box Model, border, padding and margin are counted outside of the element and not inside.
So in this case you might like to have padding and not margin.
Though, you can alter the behavior of CSS Box Model by using box-sizing property set to border-box or padding-box which will count the border and padding inside of the element rather counting outside of it..
The paragraph tag has margin on it by default. So if you want to get rid of the margin you need to set it to 0 and to expand the paragraph container you need add padding (pads inside of the container), margin is used for outside of the container
p {
margin: 0;
padding: 10px 0
}
http://codepen.io/anon/pen/Bqgyd
As you can see from this example, the input seems to "overflow" its parent div. I'd like to add padding to the input without making it overflow its parent.
I would like to know the best solution/workaround for every browser (including IE, Firefox, Chrome, etc).
You can see this answer, but if you don't like it, you can use box-sizing CSS3 property like this:
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Live jsFiddle example
Padding adds to the width of your object. One option would be to remove the left/right padding from the input and just use text-indent, although this removes the right padding.
.inside{
background: blue;
border: none;
padding-bottom: 10px;
padding-top: 10px;
text-indent: 10px;
width: 100%;
}
Alternatively, instead of using hardcoded pixel-widths for your padding, you could use percentages, and subtract that value from the width:
.inside{
padding: 3%;
width: 94%;
}
Don't specify the width of the inside div as 100%. A div will automatically fit the width of its parent container. Demo
Looks like the input is inside the div but is located in the top left corner. Because the input takes-up 100% of the div's width it obscures the red background of the div. The div is longer so it sticks out the bottom making it seem like the input is on-top. Do the following:
Apply the padding to the CSS of the outside div not the input box.
You could apply a margin to the input if you want but I think padding
the containing div is better.
Make the input box less wide than the div (<100%)
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).