You can see the code of the page here.
I don't know why there is that padding with yellow background around the Button. I've also tried to put the same code on Fiddle, but seems that there isn't that padding.
Which attribute I miss?
Your div that wraps the button has an inline style that sets the background yellow:
<div class="categoryName4" style="background-color:#FFFF00;">
div element has a default of 5px padding if I remember correctly.
Try adding an id tag,
<div id="box">
And use this css:
#box {margin: 0; padding: 0;}
The containing <div> has fixed width - get rid of that and you won't have that "padding".
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.
The padding of a textarea is always fixed. When the text content of the textarea is scrolled, the padding remains near the edges.
The padding of a contenteditable element behaves differently. When the text content of the element is scrolled, the padding moves with it.
This demo illustrates the difference.
Can a contenteditable element by styled so its padding behaves more like textarea padding, staying in place while the text content is scrolled?
The answer to your specific question of whether a non-textarea "contenteditable" block level element's padding can behave like a textarea's is "no."
There is likely a way to achieve this look by adding additional elements to your div, but the padding of your div will always behave as padding is designed to.
Your padding issue has nothing to do with the "contenteditable" property. You could take the "cnotenteditable=true" off of your div, and the padding behaves the same way. Padding "clears an area around the content" of the element, which in this example is the text in your div. The padding will always remain around the text, not around the inside of the div.
<style type="text/css">
contenteditable] {
outline: 0px solid transparent;
}
</style>
<body>
<div style="padding:20px">
<div contenteditable="true"></div>
</div>
</body>
A reply in 2019. Set:
border: 10px solid black;
background: black;
color: white;
Works perfectly.
fiddle: https://jsfiddle.net/shill/2k81acux/
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
Incredibly simple piece of HTML - but not displaying how I would expect.
I'm trying to create an empty div that displays as whitespace on the top of the page, with style="height: 400px;"
Even though I have specified a height, my empty div will not display. What am I missing here?
UPDATE: my main question is: Why does an empty div not display even if it has a height set? Or, what are the basic style rules needed to display an empty div?
Full code:
<html>
<head><title>Site Name</title>
</head>
<body>
<div style="height:400px; width:100%; margin:0; padding:0; position:absolute;"></div>
<div style="width: 50%; margin: auto;">
<img src="logo.gif"></div>
<div style="width: 50%; margin: auto;"></div>
</body>
</html>
If you just want to add white space try this
<div style="height:400px; width:100%; clear:both;"></div>
FIDDLE
or you could just add padding to the body like body { padding-top: 400px; }
The css style you are looking for is min-height: 20px; By default a div without content will have a height of 0 due to the auto setting being the default which sizes itself to fit content.
For who looking for a white space (not exactly an empty div) you can add an empty span so the div is no more considered as empty one.
Avoid using because the default font-size can make the div higher than you want.
div{
height:100px;
background:#ff8800;
}
<div><span></span></div>
You need to add a background so you can see the white box.
background-color:black;
You won't be able to see it.
The reason it did not display is because you had position:absolute in your style. That means that div will be positioned independently of the other elements, and have no effect on the div that follows. So your second div is essentially the first div on the screen.
Add some whitespace to your div and it will work.
<div style="height:400px; width:100%"> </div>
I have the following code:
http://jsfiddle.net/3fT2M/
Why isn't the two floated div background color isn't #666666 even though they are under the container div?
It works only if I set the container height which I would like to set to auto.
How can I make it work with .container { height: auto; } ?
Thanks,
http://jsfiddle.net/3fT2M/3/
Because the elemtns are floated inside the div.
This takes the element out of the normal flow of the document.
I've added the overflow: hidden; fix
Right now your div.container has no height. So you cannot see the background-color.
A simple fix is to add a <br /> before the last closing </div>.
See the fiddle: http://jsfiddle.net/3fT2M/2/
It also seems a simple .container div{background: inherit;} works.