I've read a few articles on vertical rhythm and web typography but there's an aspect that's never really discussed.
I prefer having much space (or no extra margin/padding) between a headline and it's first paragraph as this visually groups the headline with it's content much better.
I've tried removing margin-bottom from headlines but because of margin collapse, the margin-top on paragraphs or ul's gets used - so you end up with the same vertical space between the headline and it's content.
Is there a way to say to the browser that the first paragraph shouldn't have any margin between it and it's headline?
.main p:first-child doesn't work because the browser doesn't look for the first instance of a p (unless it is the very first item which it won't be because there's always a headline before it).
Hope that makes sense - any pointers in the right direction would be much appreciated.
Cheers
Try with this selector then :
.headline + p {
/*Styles to remove*/
margin-top:0;
}
With this you select any p that is right after a headline
You can use the magic of negative margin-bottom on your header.
h1 {
margin-bottom:-20px;
}
Related
I'm trying to understand the effect that margin has on two elements. I have the following HTML, see the dabblet:
<p>some text</p>
<pre>some code</pre>
I have the following CSS:
body { color: white; }
p { background: red; margin-bottom: 50px; padding: 20px; }
pre { background: purple; margin-top: 40px; padding: 20px; }
So I've given the paragraph tag a bottom margin of 50px, and I've given the pre tag a top margin 40px. I was expecting therefore to find 90px vertical distance between them, but only have 50px.
I understand that the margins are collapsing, and that if I want to fix this then I need to add display: inline-block to the pre tag. But that causes the width of the pre tag to collapse.
Again, I know that I can fix the width problem by adding width: 100% to my pre tag, but I've got padding on the pre tag (20px), so this causes my elements to be too wide. I know that I can use box-sizing to deal with that, but what an almightly pain in the crotch it is to have to mess about with width, display and box-sizing just to have the desired amount of vertical space between two elements. So I simply refuse to do any of that.
Instead, I've decided that I'm just going to add margin-top: 90px to my pre tag, which will guarantee that I've got the 90px space that I want.
My question is: Are there any browsers out there that don't collapse margins in the way the others do? Will I inadvertently end up with 140px space (90px from the top-margin of the pre tag + 50px from the bottom margin of the paragraph tag)? In other words, are margins collapsed reliably and consistently across all browsers, or is there a browser out there that does it's own thing?
It's hard to give a definitive answer to this question because it's very broad. "All browsers" is a lot of browsers. There could always be some fringe browsers you never heard of that handle this differently. It all depends on how the browser's CSS rendering engine was written.
That said, any browser that wants to be taken seriously will try to adhere the W3C specs, which have the following to say about margin collapsing:
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Adjoining vertical margins collapse, except:
Margins of the root element's box do not collapse.
If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.
Horizontal margins never collapse.
Source: Box Model (w3.org)
I figured it'd be a nice addition to just put your code to the test in as many browsers as possible. I made a test page page of your html (slightly modified), with an absolutely positioned 50px high block that should fit right in between the collapsed margin, to make it easier to spot a difference:
http://files.litso.com/playground/margin.html
Then I ran this through browsershots.org to get screenshots of how browsers would display this piece of HTML:
http://browsershots.org/http://files.litso.com/playground/margin.html#
(I have no idea how long this will stay cached, but I guess you could always just run it again)
Interestingly, the positioning of the blue block is a few pixels off in a bunch of the screenshots. You can still tell the margins are collapsed correctly, but I do wonder what exactly the problem is with the positioning.
The only browsers that don't seem to collapse the margin correctly are Dillo 3.0.2 and Links 2.7 on Debian 6.0, neither of which seem to listen to padding or margin properties at all (nor to the absolute positioning for that matter). They would mess up your layout no matter what, and you shouldn't worry about it. People use browsers like these for a specific reason, and seeing your page exactly as you intended it to be seen is not one of them.
TL;DR: Yes, it's safe to say that all browsers collapse these elements reliably and consistently.
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'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;
}
If I set the img's size to 100*100, the containing div will be like 100*106.
Where does that extra '6px' come from? How does this behavior fit to the standard?
#clyde; yes this is a natural behavior of image because img is an inline element so user agents leave some space for descender characters.
you can remove it with css:
img { display:block; } or img { vertical-align:bottom; }
FOR MORE CHECK THESE
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
Unwanted padding-bottom of a div
I think we need more code, especially CSS styles, but essentially the cascading part of CSS can easily flow inherited sizes downwards. If your A has a style of some extra padding or margin, then your final DIV will get it, too. And A is an inline element which often adds padding in anticipation of more content; turning A's to blocks often solves these kinds of issues, so I would try that first.
I'm using a background image to add a custom bullet to list items in my content. In the content there are also images floated left. When an image and a list item are next to each other, the bullet appears where it would do if the image wasn't there, but the text wraps around the image.
Here is an example:
http://golf2.test.textmatters.com/content/greenkeepers/turfgrass/turfgrass_speci/cool_season_gra
is there a way to make the bullet appear where is should (i.e. next to the text)?
In Firebug / Firefox (you'll have to check other browsers) I solved your problem adding a:
li {
overflow:hidden;
}
Don't know why exactly, but that magical line solves lots of problems around floated stuff :-)
Edit: Solution if you can change the html slightly
If you have any control over the html, you could perhaps use paragraph tags instead of list items:
p.list_item {
background: transparent url(/++resource++stylesheets/images/bullet.gif) no-repeat scroll left 0.45em;
padding-left: 11px;
}
However, that would kind of change the semantic meaning of the list items...
This is an old topic... but thought I would add how I usually do this in case someone stumbles in here via a search...
If I have an image on the left, and plan to have graphic bulleted unordered list (UL) to the right of it, I place the image statement inside DIV tags, and add a float:left style to that DIV.
Then, I wrap my UL tags inside a DIV, and give that DIV a float:left style as well, causing it to appear to the right of the first DIV.
If I have additional text that I would like to resume UNDER my UL, then I give the second DIV a width that equals the total width of the page/column minus the graphic width - basically, to account for all of the space to the right of the image. That will force continuing text to flow directly under the UL DIV, and if the UL is shorter than the graphic, the text will flow to the right of the graphic and then under the graphic as expected.
If the UL extends lower than the graphic, then the text will just start under the image, as expected.
If you want the text to simply start UNDER the left graphic regardless of the height of the UL, then you could just apply a clear:both style to the ensuing , i.e.
In general this approach works so long as the UL isn't too much taller than the left image, because obviously in this scenario, the list itself isn't going to wrap under the image, leaving whitespace - so to make a long list look right may require some purposeful image sizing, or stacking a couple of images in the first DIV, or whatever other solution you might have.
If you really want to get whacky, I've had a few times where I've used the two DIV method described above, but setting the first DIV to position:relative, and placing the second DIV containing the UL INSIDE the first, with a position:absolute and of course top:??px and right:??px, set of course to absolutely position my UL to the right of the image. It takes the right kind of layout to use this method, obviously...
OK that's all I had to say, hope this makes sense & good luck to whomever!
Try wrapping your list items in a <p> tag, and then give that tag a left margin.
Why do you have div.fig width set to 0 in the html?
<div class="fig" style="width: 0px;"><img src="/images/43_Fescue.jpg" float="0"/></div>
Remove that and the list will float around the image.
Well, it's not the best fix from a stylistic point of view, but floating the images right avoids this problem. Thanks for everyones suggestions
If you want the whole ul to NOT float under the image try adding overflow:hidden to the ul