I have two containers one on top of each other, the top one has a few paragraphs of text in it.
I need the bottom line of text to be 50px above the bottom container.
So i have either 50px margin bottom to the top container, or 50px top margin to the bottom container.
The problem is that its not 50px exactly from the bottom line of text because of the line height applied to the text.
Is there anyway to make text sit flush at the bottom when it reaches that point?
Hope that makes sense... i appreciate its only minor but some clients want it specific.
You can try setting line-height in the top container the same as its font-size and border at the bottom:
font-size: 14px;
line-height: 14px;
border-bottom: 1px solid #f00;
marign-bottom: 50px;
jsFiddle
try using padding-bottom instead of margin
Related
I am attempting to put some padding above an image so it's not directly against the text I have up there. The image has a border on it, and when I try to put the padding above it leaves the top part of the image's border up there. So there is an unwanted space above the image between the border. Can anyone help me? This is the css I am using:
img {
padding-top: 28px;
border:5px solid #e26b34;
}
Just use margin-top like below. Margin does basically the same thing as paddding, except padding is inside the element (inside the border) while margin is outside the element (outside the border).
You can find more about margin and padding here.
img {
margin-top: 28px;
border:5px solid #e26b34;
}
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
td.myclass{
width: 6em;
text-align: right;
padding-right: 2em;
}
As you can see, I'd like to have the text in the cell right aligned, 2em from the right cell border.
This doesn't work.
The text is right aligned but it stays stuck on the right border (the padding-right instruction has no effect).
Any idea why? How can I make it work? I'm using Firefox 22.
for text position use
padding-right : 2em;
I've read alot about this problem and I think I make everything right, but something is missing.
Here is my code:
<div id="text">some text</div>
#text {margin: 0 auto; width: 1000px; display: block; font-size: 24px; color: #000;}
http://jsfiddle.net/yKBQD/
Looks like you're looking for text-align: center style, no margin: 0 auto: DEMO.
margin: 0 auto version would require another element within div#text: DEMO
Auto margins centre an element by increasing the left margin until it is equal to the right margin. If the element is wider then its container, then it will not shift the element at all. The JS Fiddle frame is rarely going to be over 1000 pixels wide.
Auto margins centre an element, not its content. You won't be able to see the position of an element (if it is as wide or wider than its container) unless you add a border, background, outline, etc so the edges become visible.
To centre inline elements and text inside an element, set text-align: center on the element containing them.
I'm trying to understand why the line-height CSS property places the text vertically in the middle of this button:
.btn-order {
width: 220px;
height: 58px;
font-size: 24px;
padding: 0;
text-align: center;
vertical-align: middle;
line-height: 58px;
border: 1px solid black;
}
<div class="btn-order">Complete Order</div>
The line-height property is essentially setting a 29px (29 + 29 = 58) text line above and below your text, "Complete Order". If you added another line of text below this you will find it 58px below this text. You are putting line-height here only to center your text in the middle.
Here is a good slide show to help you understand this concept more... line-height
And here is an example using your code of what I am talking about: http://jsfiddle.net/YawDF/14/
By setting the line-height to 58px you are telling the browser to leave half this above and below the text line, creating a '58px' gap between each line and only a '29px' gap above the first line.
SIDE NOTE: Your use of vertical-align: middle is useless in the code you are showing. This can be taken out all together.
it is by design. If the CSS parser (i.e. the browser) doesn't know how tall is your text, he can't vertical align your text correctly.
Note there is a default value of line-height property.
line-height defines the height of text which make the paragraph looks neat so vertical-align works with respect to line-height when you increase the line height it increases the height and the you can more clearly see the effects of vertical-alignment of text
think this as a notebook which we children use to learn English -writing in nursery class
The text you generate is inside its own line box and vertical-align is used for placement inside that box. However, that box has nothing to do with the div you have wrapped around the text. You set the height of the div to 58px but that does not affect the height of the line text box. That is why you need line-height to match the height of the div.
Whenever a paragraph is inserted in a division the distance between the first line and the top border of the div is half of the line-height i.e if the default line- height is 1px then the distance between the first line and the top-border of the div is 0.5px.
If you have a division with height:58px the distance between the line and the top-border of the div is 29px and the distance between the line and the border of the bottom div would be=(total div height-distance b/w the line and the top border) which is 58px-29px=29px.This results in the line being vertically aligned at the center.
Also,there is no need to use vertical align:middle(for text containing not more than one line) if you're using line-height to centrally align the text.
When I have text beside an image and set them at the same point on the screen, why don't they align properly at the top of their containing div? The text appears to be a pixel or two lower than the image. Is it because of the hight of the text?
The site I am concerned with is below. I want the top of the head-shots to align with the top of the bios. Any ideas?
http://www.fiveholeforfood.com/the-team/
That's because of the line-height
The line- height is pushing it down a couple of px but if you want to keep that for ease of reading I'd give the paragraphs a -5px margin on the top
#content .single p {
line-height: 1.5em;
margin-bottom: 10px;
margin-top: -5px;
It rather seems to be font-related, perhaps the ascent line is pushing the font down.
If so, there's nothing that can be done about it except adjusting the margins & padding’s applied to your elements to move the text some pixels upwards. Changing fonts or maybe even font-sizes would ruin the effect though.