I'm thinking of creating some CSS styles for padding and margin that would work something like this...
If you want to add padding to all four sides...
<div class="Pad4">
If you want to add padding to the top and bottom...
<div class="PadV">
If you want to add padding to the left and right sides...
<div class="PadH">
Similar styles would designate padding for the top (PadT), bottom (PadB), left (PadL) or right (PadR) sides.
The second class of styles would designate the amount of padding or margin. For example, 10 = 10 pixels, 25 = 25 pixels.
You would then put it together, like this:
<div class="PadV 10 PadH 25">
This particular div would then have 10 pixels padding on the left and right sides and 25 pixels on the top and bottom.
Of course, this won't work exactly as I've described it because of a number of issues. For example, imagine these two div's...
<div id="Uno" class="PadV 10 PadH 25">
<div id="Dos" class="PadV 25 PadH 10">
If I then have the following style...
.PadV.10
how could I make sure it only gets applied only to div#Uno, not to div#Dos?
And perhaps an even more important question - does my scheme sound like a good idea, or is it too verbose, amateurish or whatever?
It seems pointless to me, if I'm going to type out
<div id="Uno" class="PadV 10 PadH 25">
I may as well just do inline styling
<div id="Uno" style="padding: 10px 25px">
Generally a classname must begin with an underscore, a hyphen, or a letter then it could follows by a number; Unless you should escape the numeric character.
I suggest using something like padding v10 h25 instead.
In this approach the padding determines the property and v10/h25 determine the values.
.padding.v10 {
padding-top: 10px;
padding-bottom: 10px;
}
.padding.h25 {
padding-left: 25px;
padding-right: 25px;
}
Same for margin (if it's needed):
.margin.v10 {
margin-top: 10px;
margin-bottom: 10px;
}
.margin.h25 {
margin-left: 25px;
margin-right: 25px;
}
CSS classes are unordered sets, so you can't distinguish the two divs with class selectors. You should probably go with the great advice of the other answerers.
But just for fun, I made a proof of concept that abuses attribute selectors to do it. For example,
[class*="PadV 10"]{padding-top:10px;padding-bottom:10px;}
http://jsfiddle.net/A8Ury/
The idea you are after is cool but i dont think this is a good way to control margins and paddings.
.PadV.10
can looks easier to use but messes up when used with integers which coould represent anything, margins or paddings.
.pad.v10 .pad.h10
.mar.v10 .mar.h10
is a better way of doing it. just my view. so you can know all three aspects of CSS properties (i.e. its a padding where top and bottom (verticle) values are 10px and left and right (horizontal) values are also 10 ). Just my view.
Good Luck
Related
So when you put a word into a block container there is a small spacing between the very first pixel of the very first character ("1" in this case) and the left edge of the container. How do I remove it?
Setting padding to 0 doesn't help, as you can see from the picture:
Here is the sample to play with: https://codepen.io/alanklm/pen/oNWXerd?editors=1000
<div style="width: 300px;">
<div style="float:right; padding: 0; font-size:200px;">
15
</div>
</div>
I can use negative margins to compensate for this, but this would be an ugly solution, which will mess all the rest of css around the box and also for different fonts and different letter the amount will be different.
As Paulie_D commented, setting container so it dimensions matches geometric bounding box of its text (a vice versa text to 'touch its wrapper') is not universally possible in plain CSS, and generally even not quite desirable typography-wise.
You can super "hand-craft" style to match precise combination of font and text, but unless font used will be super "blocky" and with uniform metrics, it will work only for that single combination:
<body style="background: white; margin: 10vmin">
<div contenteditable style="display: inline-block;
font: 90vmin / 0.7em Times New Roman;
background-color: black; color: white;
text-indent: -.121em; word-spacing: -.317em;
">15 <!-- = space for negative word spacing --> </div>
</div>
(Notice those wacky text-indent & word-spacing values.)
Rendered outcomes in Firefox on Windows machine:
("correct"), ("wrong").
As you can see, metrics of (used) font are set for visual balance, not geometric boundaries.
Hypothetically, using JavaScript canvas to get geometric bounding box of text and applying data back to style is technically possible, but as seen in the "correct" example above, even then the "rightmost" pixel of the top arm of the "5" glyph outreaching its bottom arch is probably not the right boundary to take.
You might try a combination of absolute positioning and media queries.
Set the parent div to position: relative and the child to position: absolute, then set the left property to a negative number, like left: -25px
You'll likely need to use media queries to adjust the left property value as you scale down.
I have a question about scaling line-heights for vertical rhythm. I'm going to be using pixels in the example below, just to make things easier. Let's say this is the base structure for my p-tag:
p {
font-size: 20px;
line-height: 30px;
margin-bottom: 30px;
}
Now in this case I've got my rhythm unit set to 30px. So, question one: does this mean my vertical spacing between elements needs to be a multiple of 30, and my line-heights need to be a multiple of 30. Is that correct?
And my second question is, how do you stager spacing so there is more on the top lets say, than the bottom? Let's say I wanted to make an h2 whos margin bottom was less than it's top. How do I scale properly, without breaking the vertical rhythm?
Now in this case I've got my rhythm unit set to 30px. So, question
one: does this mean my vertical spacing between elements needs to be a
multiple of 30, and my line-heights need to be a multiple of 30. Is
that correct?
That's pretty much it, yes.
And my second question is, how do you stager spacing so there is more
on the top lets say, than the bottom? Let's say I wanted to make an h2
whos margin bottom was less than it's top. How do I scale properly,
without breaking the vertical rhythm?
Just consider the h2 as a multiple "height" of the line-height that you have set as your base unit. Use margin-top as well as margin-bottom to refine the spacing of the h2 until it looks good "to the eye. Cf.:
30 line
30 line
30 p margin-bottom
15 h2 margin-top
40 h2
5 h2 margin-bottom
30 line
30 line
etc
(So all of that h2 section adds up to 60, or 2x30)
And the CSS:
p {
font-size: 20px;
line-height: 30px;
margin-bottom: 30px;
}
h2 { // consider this really as a unit of 60 (30x2)
font-size: 40px;
margin-top: 45px; // = 15+30 (*see below)
margin-bottom: 5px;
}
*The margin-top isn't simply 15, because we must compensate for margin-collapse:
https://www.w3.org/TR/CSS21/box.html#collapsing-margins
And last comment: Don't worry too much about making all of your work conform to a set pattern. There are some contexts where a rigid pattern translates as overly "stiff" to the reader. So perhaps in a clinical corporate setting this might be appropriate, but when we try to do the same thing for an organic farm website, it is far too rigid and ends up being completely inappropriate, visually.
If we are really good designers, then we are like the jazz drummer who has the ability to play "behind the beat", and does so exactly when it is necessary.
I am trying to remove the spacing at the beginning of my h1 tag. Please see the attached screenshot. I have highlighted the h1 tag in blue so you can see the extra space at the beginning of the wording. It amounts to around 1 or 2 pixels. The space is not margin or padding. The space is definitely from the h1 element because I have removed the rest of the elements from the page. What could this space be? and how can I remove it?
UPDATE: Please see this jsFiddle for the example code
This vertical sliver of whitespace before each character is almost certainly a characteristic of the font you're using to render this <h1> text. Font designers manage inter-character spacing by putting some of the space at the end of characters and some of it at the beginning. They typically optimize this for both optical (eyeball) alignment at the beginnings and ends of justified lines and also for nicely balanced intra-word spacing.
If you must get rid of it, there are some things you could try.
Negative tracking. Try a small negative CSS letter-spacing attribute like .05em. This will cram your characters a little closer together. Be subtle with this effect.
A boldface font choice. Often the font designer makes the font bold by thickening the strokes symmetrically about their centerline. This may eat up a bit of the leading whitespace.
As a last resort, render the text into a graphic (png or gif) and then trim its edge. This won't look very good.
In this case the issue was due to the padding on the body of the HTML markup.
Adding this clears it;
body{
margin:0px;
padding:0px;
}
Whether this is the solution in your scenario is impossible to say without the full code.
http://jsfiddle.net/jU43x/5/
Adding margin-left: -3px; to the h1 tag will fix this: demo
h1 {
font-family: 'Roboto Condensed', sans-serif;
margin: 0;
padding: 0;
line-height: 1.2;
font-size: 97px;
margin-left: -3px;
}
The analysis by #OllieJones is correct: you are dealing with details of font design. In effect, you are trying to undo some decisions by the font designer, in a specific context; there is no general mechanism for that.
What you can do is to shift the content left. The amount of the shift depends on the specific font properties and the characters involved. In the given case, a shift of 5px pushes the “C” against the left edge. But beware that if the first letter is something else, it probably gets pushed too much. Different letters have, on purpose, different spacing around them in the font design.
Content can be shifted using positioning or, perhaps safer, using auxiliary markup and a negative margin:
<style>
h1 > span {
display: block;
margin-left: -5px
}
</style>
<h1><span>Covered with grass then detained</span></h1>
This lets you use normal styling for the h1 element. For example, if you draw a border around it, the letter “C” will touch the border. I presume this what you want (though it would be a typographic error). Alternatively, shift the h1 element left simply by setting a negative left margin on it.
I am trying to remove the space between the different tables but not able to do so.
If I were you I would seperate your css out into another file. Inline css can be very hard to find sometime.
To get all the tables next to each other, you need to change all of the inline css on .row elements to the following:
<div class="row" style="margin-left: 40px; margin-right: 20px; padding: 0 10px;">
I would also probably add margin-top: 10px depending on how much vertical space you want between each table.
Specifying margin-top, margin-left, and margin-right is the same as margin: top, right, 0, left if you want a shortcut.
Each table element seems to have the class time so you can just apply a negative margin to that class. Something like this should work:
.time {
margin-bottom: -30px;
}
http://jsfiddle.net/nJa45/4/
Now, that being said, if you are trying to eliminate the spacing all together, you might have better luck restructuring your table. Rather than having multiple tables, make the entire thing one nested table. This will provide a more consistent removal of white space.
I have text within a paragraph tag that that fits snug on the bottom of a div, which you will see in this picture: http://i44.tinypic.com/e05s0z.png
I could put some padding at the bottom of the div to fix this, but there might be multiple divs, depending on how many items are on that page.
What I need to do, is put some spacing between the end of the very last div (class="article") and the text within the paragraph tag.
Here is the css for the article class
.article {
padding:10px;
overflow:auto;
}
Text w/i the paragraph tag
<p>Herkimer County Community College does not
discriminate on the basis of race, color, sex,
national origin, age, handicap, or marital status
in admission, employment, or in any aspect regarding
the conduct of College business.</p>
What should I do?
Give the final paragraph an id - #disclaimer, perhaps - then style that to have padding-top.
<p id="disclaimer">Herkimer County Community College does not
discriminate on the basis of race, color, sex,
national origin, age, handicap, or marital status
in admission, employment, or in any aspect regarding
the conduct of College business.</p>
and...
#disclaimer {
padding-top: 10px;
}
[EDIT]
An alternative to this, based on your comments, would be to surround the article(s) in a div, and give that div.class a bottom-margin/padding style.
If you have other paragraphs on your website and do not want to give it an id or class, then you can also use
.article + p {padding-top: 10px;}
Some old browsers will not be able to make out this selector, though
You could wrap your paragraph in a container that has padding at the top, so it doesn't matter what's above it.
For example, wrap it in a div with the following css
div.finaltext {
clear: both;
margin-top: 10px;
}
Here are your options as far as I see it:
Use the :last-child CSS3 pseudo
class to target the last div. This
isn't supported by IE at all, so
depends how important that browser
is to you whether this is an option,
but at least other browsers would
get the desired effect.
.article:last-child { padding-bottom: 20px; }
Add a class to the last div with the same style as above. This isn't ideal and may or may not be possible depending on how the divs are generated.
Add a class to the p tag with a padding-top value.
Use .article + p selector to target a p tag that is a direct sibling of .article. This is supported in IE7 (I think) but not IE6.
I would always give preference to #1 or #4 as it reduces clutter in the HTML, but as I mentioned IE could be a problem depending on your needs.
(thanks to Residuum for #4)
there is also the first-child and last-child css methods
note: check browser compatability for those you wish to support
It's the construction like this?:
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<p>kfdhsjkfdks</p>
You use padding: 10px so the div has 10px inside margin.
If it's a CMS, I'm sure that the text of the paragraph could be wrapped inside another tag (DIV) or maybe a class for the (P). If this isn't the case, may I ask if there's a surrounding wrapper around all of the article divs and the p tag?
If that's the case then you can get to the P tag using CSS, if not, there's no way you achieve this in every browser.
OR... I realized you could do a trick here. but you've got to be sure you have a selectable div on top of the article divs.
It should be something like this:
.article { margin-top: -5px; margin-bottom: 15px; }
so, every div.article will move 5px up, leaving 10px of real margin betwen article divs. but the last one won't have the -5px move up, so you'll end up with 15px bottom margin for the P tag.
You could play with the numbers to make it the most comfortable number. And in case you need more control, then use the padding values you set to 10px in every way and set them accordingly to compensate the margin offset.
Could you simply add a couple of <br/> tags after the last div?