I have set up vertical alignment using the same value line-height, vertical margins and paddings, but when there is a smaller element, like the <small> tag, inside the flow, it ruins for some pixels the vertical rhythm, I can solve adding vertical-align:top/bottom but the element is not aligned with the other text, U can add display:inline-block and transform:translateY(1px) to solve the other issue but this is not an elegant solution. Is there some other solutions? And I'm wondering why smaller texts work like that.
I linked a photo to make more clear.
screenshot
This seems to work without breaking vertical alignment:
p small {
line-height: 100%;
}
If you want your lines of text to always have the same height, so they match your background, use line-height property.
Related
I'm trying to understand how the line-height property in CSS works. I know that it sets the spacing between lines of text. What I don't understand is why, when you set line-height the same as the height of the container, it vertically aligns the text. For example, if you did this:
.btn {
height: 22px;
line-height: 22px;
}
And create an element with the "btn" class, the text in that element will vertically align to the center and I don't understand why. To me, it makes more sense for the first line of text to appear at the very top of the container, and the second line to be at the bottom, possibly overflowing, since that will be 22px down. Can someone please tell me why it works this way, because I don't feel like I can understand the line-height property fully unless this is explained. Thank you.
line height is the amount of space above and below elements. thats pretty much all I can tell you.
If you wrap the text in a div, give the div a height, and the text grows to be 2 lines (perhaps because it is being viewed on a small screen like a phone) then the text will overlap with the elements below it. On the other hand, if you give the div a line-height and the text grows to 2 lines, the div will expand (assuming you don't also give the div a height).
Here is a link that demonstrates this
.shorty
{
height: 12px;
}
.liney
{
line-height: 25px;
}
Line height is actually referring to the top and bottom vertical spacing between the phrases. The reason why setting the same height as the line-height as it will auto centralise the invalid spaces. Sharing the similar explanation to centralising the body using margin {auto 0}
You can play with the examples available in w3schools.
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_line-height
Ref:
http://www.w3schools.com/cssref/pr_dim_line-height.asp
It helps me to understand CSS3 syntax and attributes even more.
I hope my share could help you. :)
Edited: I just happens to find a better answers to your question in here: How do I vertically center text with CSS?
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/
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
I have a div that is float: right and it is inside a parent div. There are p elements inside that same parent div also, and the text wraps around the float: right div properly.
However, if I set the p elements to have a border, or do a <hr />, the border does not stop where the text stops, but extends behind the float: right div.
Here is a beautiful mspaint depiction of the situation:
Note that the green part of the black horizontal line is behind the floating div.
How do I get the border or <hr /> or whatever to be only as wide as the text, and not go behind the div?
I know this problem was posted some time ago, but I had the same problem today and found another solution:
http://jsfiddle.net/MvX62/
I use border-bottom instead of the <hr /> tag and had to add an overflow: hidden;. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.
Also you don't need to define z values and don't need any hacks or workarounds.
I've had this problem before, and I wasn't sure if it was solvable.
In your case, however, you could wrap the green box with another element and swap margin with padding and set its background to #fff to cover the offending line.
Check out the fiddle...
http://jsfiddle.net/UnsungHero97/8BwGB/3/
What I did here was give the floated element a z-index CSS property, which will put it "above" the non floated element (which has a smaller valued z-index) and the <hr /> will not go above the floated element.
In regards to getting it as wide as the text, in my example it is as wide as the text, but I'm not sure if that holds across browsers (I'm on Chrome). Let me know if it doesn't.
I hope this helps.
Hristo
p.s. excellent mspaint skillz :)
You would have to set the width of the paragraphs to the width of the container minus the width of the floating element, or you could give them a margin on the same side of the float equal to the float's width.
Div cannot wrap around another div. Wrapping is text-only property. You can simulate wrapping by setting the margin-right for the master div to the width of the div you want it to wrap, but text wil not flow under the inset div.
Some values of the overflow property can cause this behavior. Specifically, overflow: visible which is often set by popular CSS resets/normalization.
I can't seem to wrap my head around how img tags behave alongside text in an html page.
I've removed margins and padding, but there always seems to be some extra space under the img or some other unexpected behavior. I'm sure theres quick CSS workaround using absolute positioning or negative margins but I'm looking for a more general solution.
Question: Can someone explain how img tags are positioned, specifically why do they get offset vertically when alongside text?
If you want the <img> to be an inline element, you can use the vertical-align CSS attribute to specify how the image will be aligned relative to the line of text it appears in. This page has examples under the "vertical-align on inline elements" heading.
The key to getting your text to wrap around your image is setting the float attribute like so:
img {
float:left;
display:block;
}
CSS has two types of display: attributes: block and inline.
Inline is like text. It streams along, wraps at the end of a box, stuff like that.
Block is chunky and has margins and padding and width (either calculated or derived).
It doesn't make a whole lot of sense, but <img> is actually an inline element, along with <a>, <abbr> and many others. What's happening is that the image is actually being rendered roughly equivalent to letters, and it just happens to not be 12pt tall, but maybe 130px or whatever your image is. That's why it sticks up.
Declare <img style="display:block;" src="image.png" /> to get it to behave like the box most people think it is.
IMG elements get positioned just like any other inline element.
What you see under the img is the space needed for the descendant part of a glyph like g or j. An image behaves just like a letter and sits on the baseline.
img
{
display: block;
}
Will fix it for you.
An experiement that might shed some light:
<p style="font-size: 1em;">Lorem ipsum dolor <em style="font-size: 800%;">sit</em> amet.</p>
Think of the <em> as a ~128px high image (if 1em is 16px that is).
If you want more control over your image positioning, wrap your image in a DIV and control the positioning of the DIV. You can float the div if you want to intermingle it with your text.
This might not be relevant in this particular case (hopefully the advice from previous answers should solve your problem), but if you're finding you're getting unexpected extra space around elements, make sure that you've removed the default padding, margins etc. that browsers often add to elements (and of course different browsers often add different amounts of padding, margins etc.
If you make sure you've zeroed margins and padding etc. by using
body { margin: 0; padding: 0; border: 0; }
at the start of your CSS, you can then add any padding and margins etc. without having to worry that the browser's defaults are going to cause any unexpected spaces, and hopefully fewer inconsistencies between browsers.