This is the code:
#content{width:400px;}
h2{margin:0px;line-height:100px;}
<div id="content">
<h2>Hello world. Hello world. Hello world. Hello world. Hello world.</h2>
<span>goodbyeeeeeeeeeeeeeeeeeeeeeeeeeeeee</span>
</div>
See how the code work here
I need a way to put the "goodbyeeeeee.." string 2px below the h2 headline without ( if possible ) using margin with negative numbers ).
Obviously I need also the space between the 2 lines of the h2 headline.
EDIT: I can also avoid to use line-height but I need the space between the 2 lines of the h2 headline.
I don't think it's possible to change the way line-height behaves. It puts the text of the h2 in the middle of the 100px high line.
So, sorry, but no. Unless you find a way to get rid of the line-height property, you're stuck with using negative margins. Or relative positions.
Edit:
If you do use a negative margin, please put in on the h2 itself, not on any other element that happens to come after it in your current page. The h2 is causing the problem, so that's where you should solve it.
Setting the height could do it, depending on the situation.
h2{margin:0px;line-height:100px;height: 157px;}
If you want the large spacing between the two lines of the h2 but want the span text hugging the bottom of the second line of the h2, you can set the span to display: block to enforce the negative margin:
h2{margin:0px; line-height:100px;}
span{display: block; margin-top:-40px;}
Related
Is there a way to decrease the space between two H1's i.e.,
Happy Holidays!!!
From Me
Normally I'm assuming there is a default amount of space between 2 h1's.
But is there a way to decrease the space?
Thanks!
If you only want to decrease the space between those particular lines and not affect other headings, you can add an in-line style to the <h1> tags like this:
<h1 style="margin:0;">
If you want a small space, replace the 0 (Example: 5px, 10px).
<h1> tags have default margins.
Write:
h1{margin:0;}
DEMO.
Note that the right solution is not to use two H1's, but rather a line break.
Try viewing this with default styling and you will see:
<H1>Happy Holidays!!<BR>
From Me</H1>
<H1>And All The Best in The New Year</H1>
There are margins around headings for a reason; you usually want to keep them.
In the case of one H1 followed by another, what you can do is make the CSS rule so that it applies just to that case. Use the H1 + H1 selector to just give the second H1 a smaller margin-top.
you need
h1{
margin:0;
line-height:1;
}
proof
ps:just play around with the buttons, and dont let it mix your mind that line-height has a numeric value in its css but px suffix can be used to animate with jQuery
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
I'm attempting to get a drop caps (or initial caps; whatever you may call it) effect on a heading. Here is an example of what I'm trying to accomplish.
I've found success with inline span tags that are floated, but when the heading wraps into a second line, the paragraph section breaks onto its own line. See this jsfiddle for an example and adjust the viewing window to see the effect I'm referring to. http://jsfiddle.net/fEn4U/
The structure in the first two jsfiddle examples (with the h1 and p tags) is how I would prefer to have the html. But I can settle for a span in the p tag if that's the only solution. As you can see, I'm further away from a solution with the h1, p structure than I am with the span and p tags.
Also note that the container will be a fixed width, and the content within will be dynamic, so I can't always rely on the heading breaking into two lines or staying on one.
Try to make your small text inline-block and set a maximum size.
http://jsfiddle.net/fEn4U/2/
p {
display: inline-block;
max-width:150px;
}
I'm trying to create a border around an <H2> and the border is always rendered much larger than the <h2> text. No size is set anywhere. The H2 contains one sentence of text with a 25px font size, and let Chrome Developer Tools -> Metrics reports that the size of the H2 is 980x183, and I can visibly see that this extends beyond the text to the right, all the way up past the text to the top of the screen, and far, far to the left of the text.
So, with no size being set, how can the area of the H2 element be so much larger than the text? I might need to provide a lot more context for anyone to answer this, but it seems almost like the question should be able to stand alone.
The <div> containing the H2 is 0px x 0px, which also blows my mind a bit, but I've googled around quite a bit and don't feel that is likely to be related.
Try adding CSS:
h2 { display: inline; padding:0;margin:0}
h2 elements are displayed as blocks with default margin and padding
<h1> is a block-level element, which by default stretches to the full width of its container. That would mean that the width of the h2 box and the h2 text is not the same.
I'm not sure about your specific case, but you may want to change the display setting to either inline or inline-block and experiment with the results of those.
Here is an example of what I'm working with. http://jsfiddle.net/5J4PE/
I want the red and greed boxes to show up wrapped tightly around the text (like it is when using inline-block).
However, I want it to take up the space like when using block, such that the boxes appear stacked instead of in a line.
I don't want them to be the same width, so I don't want to use table-cell or any of the table displays.
I could just add a <br/> between the elements, but I was wondering if there was a way to do this in CSS.
you could use a span around the text & then set bg Color in css
<div><span class="red">hello</span></div>
then additionally you may use whatever styles on the outer divs.
It's just as nasty as <br /> tags, but float: left; clear: left; on all elements would get you the effect you want. Pick your poison?
Obviously you'd lose some of the layout flow with the floats, so you'd need to adjust your parent to account for that.
Have you tried using the before: or after: pseudo-classes? These allow you to add content before or after a block, using CSS.
eg <span>Hello</span> styled with span:after {content:" world";} will produce Hello world in the browser.
If you specify a line-feed, it should put a blank line at the end of your block. Note: You'll need to specify it using the unicode value of the line-feed character.
Hope that helps.