Well , I have a site with margins and a footer with different background color.
The problem is that the footer margins do not get colored in the same color as the specified footer color.
The Html code -
Here I would like color the green space orange.
I have tried replacing the margin with padding , but it does not work .
Now the problem has been resolved. Do not answer.
Usepadding css property on footer instead of margin.
Margin, as such, doesn't have background color. Margin is invisible border, a space between two objects.
Refer this Stack Overflow answer to understand more.
Hard to tell without seeing the code but I'm assuming that if changing the margin to padding for your footer div didn't work then that element might be nested inside of the element with the margin that you're saying you're applying for the site. Move the footer DIV outside of that element and apply the padding to it, not sure though without seeing the code so I could be off on that
You should use padding instead of margin in such case..
Related
How can I add padding to the top of a single div? Is there a way to do it without modifying the .css file? I am using Bootstrap and there is no space between the carousel and the first div. I tried adding padding to the carousel, but the color of the left and right chevron overlap the padding, and this is not the look I want. I want a true white space between the two.
Try <div style="padding-top: 10px;"> :)
Use firebug on Chrome or Firefox and see which div or element inside the carousel needs the padding you want.
However, the best way would be to use CSS. As you said, you want a padding, and CSS has the padding property. As #Jorgen said, just add a padding top.
Otherwise use <br> instead as #Mr Lister said
I have been trying to solve this for days but can't solve it. (I'm usually quite okay with css). The website is www.auralaid.com.
On the homepage, there is a white spacing which I want removed. The class that is causing this issue is flex-viewport whose height is always slightly more than the "gray fabric image" it contains, leaving a white space at the bottom.
How do I remove the white space?
P.S. I can't set a fixed height otherwise the contained image will be cropped when minimising the browser.
white spacing http://auralaid.com/wp-content/uploads/2013/11/Screen-Shot-2013-11-09-at-9.34.02-pm.png
you should post your code to get the perfect answer but i guess there is a problem of positioning of the div in which these two images are and also set height of image according to the div positioning.
Perhaps you should check your margins? We need the code to answer your question definitively.
For me it seems the h1-tag is responsible as with
.slide-content h1 {
display:none;
}
the white-space will disappear.
According to http://www.maxdesign.com.au/articles/inline/, the section called "Inline elements and padding" says
While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content.
So in accordance with that, it seems that it is never ever any point to use padding vertical(top,bottom) for inline elements.
Is that correct?
Well, the padding box is the area covered with the background colour, and the border is painted around that, so changing the padding top and bottom can change what the inline element looks like even if it has no effect on the surrounding content.
Here is a very simply jsFiddle to demonstrate my problem: http://jsfiddle.net/ryandlf/mSmUv/4/
When an element has a top padding or margin and it sits on the first line within a div, the div does not respect that padding or margin and push the element down. In most cases this isn't an issue, but for example, if I have a button that has a top border and padding the top of the border will be cut off because the div is not taking into consideration the padding value.
Is there a workaround for this other than just blindly setting margins or padding on every container div element and hoping I have added enough to account for any internal element that might be affected?
your link with class button is not a block element, it is inline element. Change this default behaviour by adding dispaly: block to it and it will work as expected. Proof available on jsfiddle.
So to sum up, the problem is not with the div - it is the problem with css - inline elements ignore margin and padding because they cannot 'reserve space'.
UPDATE: To answer your comment, here is the solution you might be looking for
The button element is inline. To get the desired behavior you can set display:inline-block.
Check here
Try to add following to the parent div:
overflow: hidden
I hope it helps!
I have an element in a div, which has a background image. Below the div I have another div with another background image. Now the problem is that if the last element contained in the first div has margin-bottom applied there will be a gap between the 2 divs like this:
Screenshot http://img40.imageshack.us/img40/5603/littlesnapperh.png
Notice the gray gap caused by the margin-bottom property of the h2 element contained within the first div. I know this can be solved if I switch margin-bottom to padding-bottom but what if I need margin-bottom?
How to fix this?
This is a feature known as collapsing margins. See: http://www.w3.org/TR/CSS2/box.html#collapsing-margins
The easiest way around (aside of replacing the margin with padding as you suggest) is to add a small (1px) invisible border or padding to the outer element.
Probably something to do with overflow:hidden or one of the elements not clearing properly. If add overflow:hidden to the first div it might fix it.