Here is a test-case for my problem:
http://game-point.net/misc/testParaPadding/
I want the progressBarGreen.png image to be inside the DIV, and the DIV is exactly the right height (15px) to hold it, but there are a couple of pixels padding at the top of the DIV. Why? The browser seems to be sizing the content as if it contained text because the padding changes if I remove the font-family styling for the body, but there is no text in the DIV.
Interestingly this problem doesn't happen in Firefox's quirks mode.
jsFiddle Example
You need line-height:15px on the div holding the image
edit: Explanation for this behaviour line-height affecting even no-text blocks
Your image is the right size, but images are inline elements by default, and will be affected by the page's line-height, font-size, and other properties of inline elements.
If you add a line to your image's style reading display: block;, it will become a block-level element, and not be affected by any of those properties.
The initial value for vertical-align is always "baseline".
You can fix that by adding a vertical-align:top to your image ;)
Use
position:absolute;
To get the image on the other DIV exactly inside it.
Check this fiddle: http://jsfiddle.net/sRhXc/2/
Related
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!
Ok, I am quite new to frontend development so please be nice if this is a dumb question :)
I understand that this may not be possible but when applying line-height to an element say an h1, the line-height applies extra space to both the top and bottom of that element.
This kind of makes sense, but i only want line-height to be applied to the bottom of the element so the tops of my h1, h2 etc can be alined perfectly with other elements.
This jsfiddle shows the problem: http://jsfiddle.net/zja4c/1/
This jsfiddle shows what i want to achieve but am forced to use negative margins: http://jsfiddle.net/25UTA/
The h1 with background colour of red aligns correctly to the top of the left div, but the text doesnt.
My question is therefore, is there a way to:
Apply line-height to only the bottom of an element or,
Align an element to the top of the space created by applying line-height somehow
Using line-height is your only option if you wish to maintain proper spacing across line-breaks. Padding will occur on the bottom of the block-level H1 element, as you pointed out. I think negative margins are your best bet, but you'll have to fine-tune it line up perfectly with a 50px line-height:
http://jsfiddle.net/25UTA/1/
If negative margins can't be used for some reason, you can use relative positioning and a negative top value to achieve a similar effect.
http://jsfiddle.net/25UTA/2/
Using em's or percentage font-sizes and line-heights might make this eaiser.
None of these answers reference elements with their display set to inline.
Line-height is a setting that refers to inline elements. Every answer so far has referred to using padding and margin, which don't work with inline styled text.
You can modify the positioning of text within its line with vertical-align. Here's a link to an article that goes into copious detail about the property and how it works:
http://christopheraue.net/2014/03/05/vertical-align/
A simple solution is to make the line-height 70% and add a little bit of bottom padding.
p, h2 {
line-height:70%;
padding-bottom: 3px;
}
In my knowledge its not possible to apply line-height only for bottom using css.
So you can try with padding as user1538100 said.
You could forget line height completely and use padding-bottom:
fiddle
In all major browsers: as the question states, a parent <div> container (whose height is not set) over-sizes its height to fit a child <img> element (for instance, a 300-pixel tall image that is the only thing inside the div). The over-sizing is usually about 3 to 5 pixels, and appears at first as img margin-bottom or div padding-bottom might look.
However, using absolute positioning, it is clearly demonstrated that the bottom of the div is below the bottom of the imgby a few pixels. It might not ruin a website's design, but it is a hurdle to overcome in certain situations. I have made a fairly detailed fiddle demonstrating this issue here.
Why is this standard practice in web browsers?
Is this meant to compensate for something? It seems unnecessary.
Is this a bug, or a soon-to-be antiquated feature?
EDIT: Thanks to the answerers/commentators below, I know the reason is that an <img> is treated by default as CSS
display:inline which preserves whitespace around the element.
Changing it to display:block completely fixes the problem by
eliminating whitespace around the element.
Notes: This over-sizing can be averted by giving the image child element a CSS property of float:left or float:right, etc., but this is a workaround, and as such is not the answer to the question. One reason this can be problematic is if you already have other float elements layered in front of the div child image (float overlap not allowed Firefox, Opera, IE. float overlapping only seems allowed in Chrome and Safari using CSS position settings). Thanks!
Add display:block to your image. I think that will fix the problem.
I'm creating a web application where I need to do some design tweaks. Please check this one http://jsfiddle.net/rkumarnirmal/5w3FG/9/
When I hover, it shows the border in gray. What I need is I want to fit the border box to fit the width of the text. I tried to set the width:auto but still its not working, showing the border box to the page width size.
How can I do it?
Thanks!
Set text-preview to inline-block:
#text-preview {
display:inline-block;
zoom:1; /* if you need IE7 support */
}
Inline-block will cause the element to render as if inline rather than occupying all of the available horizontal space, but will lets you set inner dimensions and padding as a block element would.
Note that IE7 doesn't support inline-block unless you force the hasLayout property. The easiest way to do that is with zoom:1;.
width:auto on a div translates to width:100% because a div is a block level element.
If you want to have it size to the text you'll need to either use a more appropriate inline tag like a span or depending on the semantic meaning of the data, a definition list (dl).
You can also change the display property of your wrapper div to be inline or inline-block but that is not semantically correct.