I was fiddling around with this example
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_clientleft_clienttop
It looked like the top picture below, having a space between the top border and the text.
I then changed the code to a top border thickness of 0px. Looked like the second picture below.
No space now. Hmm. What was the extra space in the top figure? Margins? I then set padding and margins to 0px as well. No change.
I then set the top border width to 1px. And now the entire space came back. Like on the bottom picture below.
Can anyone explain that?
Thanks
Poul
The p tag automatically creates some space before and after itself. So, for the case of border thickness to 0px
So, we are not able to see the top margin here.
Related
I1m currently working on a personal website but I have no experience with web development so I got stuck at a functionality that probably has a very simple solution. I have many of this div on my page and I just wanted the greyed background to:
Expand just a few pixels beyond the content of the div
Have rounded borders
I'm currently using
background-color: #ffffffab;
background-clip: content-box
to get the results shown, but either I paint ALL of the div, which is not what I intend to do or I leave it as it is shown in the picture. When using "border-radius" I have to increase to huge numbers like 80% to get rounded edges, and even so it cuts some part of the text. Is there an easy way to do what I'm trying to do? I'm also including this picture with the margins (orange) and padding (green).
Thanks!
Following #tacoshy suggestion:
I added more margin to the top and bottom of the container and increased the padding on the sides, this way I wouldn't need to use the content-box function: margin: 2em auto 2em; padding: 2em.
That solved it.
Thanks!
UPDATE
To get the input back to the size I want it to be, I had to get rid of padding and borders. The following accomplished this:
*{padding:0; margin:0; border:0;}
Thanks to CBroe, I discovered this is unique to FF which adds to the input a default border of .75px and a padding of 1.5px. For a total of about 4.5px. Chrome does not.
UPDATE 2
The above fix only gets the child element back to the size I thought it should be. The accepted answer below shows that FF has a bug which explains why the outline didn't behave as it should, which is to outline the parent only and not expand for absolute positioned descendents.
I have two div elements stacked vertically with their outline property set to 1px. The div elements have a height of 117px.
I expect where the two div elements meet to have their outlines contiguous. It does so with no content.
When I place an absolute positioned input with top = 97px and height = 20px into the top div , the outline of that div is pushed down.
Here is a fiddle which shows this. If you remove the input, you will see how the top div outline sits next to the bottom div.
There are two things (at least) that I do not understand:
1) In examining the box using the browser's dev tools (Firefox), I see that the top div is in fact still 117px high. The outline should be drawn around the div, but appears not to be. Why?
2) The input has a top of 97px plus a height of 20px. Why would this affect the position of the outline? It looks like the outline is pushed down 4px.
That's because outlines are implementation dependent. It's not only the size:
Outlines may be non-rectangular.
From CSS3 UI,
This specification does not define the exact position or shape of the
outline, but it is typically drawn immediately outside the border box.
Firefox has historically had a tendency of making outlines bigger in various situations, e.g.
outlines are drawn outside (i.e., expanded by) box-shadow and other visual overflow
outlines are drawn outside (expanded by) outlines on descendant elements
The former was fixed, the latter seems the same as your problem.
I've 2 answers for you:
1) In examining the box using the browser's dev tools (Firefox), I see that the top div is in fact still 117px high. The outline should be drawn around the div, but appears not to be. Why?
The outline appears to be drawn around everything inside. So if an element stand out 100px at the bottom. The outline will also be moved 100px. In this case the input element stands out 8px. So the outline is 8px longer than you expected.
The input has a top of 97px plus a height of 20px. Why would this affect the position of the outline? It looks like the outline is pushed down 4px.
You were almost right there, 97px+20px is indeed 117px height. But you forgot to count 8px from the input element. This comes from a 3px thick border + 1px thick padding.
I got these settings.. The red is a image.
I used
marging-left: -8px;
on the image so the left goes outside his parent div. But what my question is how to counter the gap on the right side. (at the arrow in the second picture).
Easiest solution is probably to not assign a width to the element. Then you can use a negative margin-left to achieve your effect.
See this fiddle for an example...
I used a CSS triangle, but it should work with an image as well.
No mater how much I play around with padding and margin properties I can't seem to solve an issue I have on larger screens - the bottom of the html has a "cut off" where it appears to have a margin from the bottom of the screen. I do not know which element this is but all the elements have been reset to have 0 padding or margin.
When I add the following css I find that the gap really is at the bottom - there are no elements underneath:
* {outline: solid 1px;}
Here is a url to the site if any kind person would like to take a look: http://preview.tinyurl.com/7ywoqpf
Your div.holder has a min-height of 650 pixels.
When I remove that, the gap vanishes for me.
The best thing to do in these cases is a document inspector like Firebug or Chrome's built in one. They will show you which elements in the DOM take up which space exactly.
Remember that block level elements will fill their container widthways but not in height. So maybe it's the case that divs and containers within your page aren't tall enough to reach the bottom. There's something called a "push divs", "sticky footers" where that div will stay at the bottom. Maybe you'd put your background image within that and it'd stay at the bottom. There are several errors in your css though, and you can't have .5 of a pixel.
I fiddled with firebug and noticed that setting:
html {height: 100%;}
has solved the problem, will update the site later this evening
Help me tweak the CSS of this page:
http://draw3cards.com/questions/1501/buyback-vs-flashback
I tried to understand why the Adsense Ad appears misaligned - I would like it in line with the surrounding box. I looked at it with Firebug but missed any margin or padding in that element.
Can you help?
Looks like it's just the padding set on your .porthole class. You have it set to 0.5ems on all sides and this is pushing the ad outside of the dashed box. Try adding top and bottom padding only and/or margin to the <h3> tag within .porthole to get the spacing you need.
The width of surrounding dotted box is about 727px where as that of ad is almost the same, you need to increase the width of the dotted box and if possible little bit of height too.