I have two lines that have space between them. Like the one below....
<h2> Something Something <h2>
<h4> Something here too </h4>
I want it to look like this:
<h2> Something Something <h2>
<h4> Something here too </h4>
The space is shown in the browser. I used the tags just to make it clear.
How to reduce the space within the orange rectangle ?
First, ensure that padding and margin on your header elements is 0.
After that, you can adjust their line-height values to get the amount of space you like. Example: http://jsbin.com/afivoq/4/edit
Another option for you! You can apply a negative margin-top on header elements which follow other header elements, like so:
h2 + h4 { margin-top: -20px; }
See the jsbin for updated example.
I'd set all padding and margins to 0.
h4, h2 { padding:0; margin:0; }
This is an oversimplification of your code most likely but it'll get the job done.
Add it in your css:
h2{
margin-bottom: 10px; //something smaller
}
h4 {
margin-top: 10px; //Whatever you like
}
Your second <h2> isn't a close tag </h2> so your adding an extra H2 element. Also take a look at this example with Firebug installed. Firebug has a feature called Layout which will show you where the space is coming from:
Resetting your margin and padding for the header tags like everyone else is saying is a great start. The best advice I can give someone who is learning CSS is to get chrome.
Right-click the element you want to change and hit "Inspect element." On the right hand side, you can alter the CSS on the fly. Then you can copy and paste the results into your application. Chrome also has the ability to save your CSS code.
Related
Ok, sorry I don't have any code to post but it's pretty simple.
I have a regular <h1> ...</h1> block of text that has been centered but I want to move it... Say maybe down 20 px.
How would I do this?
(I don't have a lot of experience with CSS)
the easiest way to do this is like this if you want to use css inline:
<h1 style="margin-top:20px">your text here</h1>
now if you have a style sheet made and linked to the document head such as
<link href="/css/style.css" rel="stylesheet">
then you can simple target the parent div and do the same thing like this
.parentcontainter h1{
margin-top:20px;
}
your html should look something like this
<div class="parentcontainer">
<h1>your text here</h1>
</div>
the second option will give you more controll in the long run and make it much easier to make changes if you have a lot of pages using the same styling.
h1 will have a default margin, but you can increase that. Try for example margin-top: 2em, which is twice the font-size of that element. (The default margin top and bottom would probably be already 1em, depending on the browser, so defining margin-top as 20px would not have much effect - just try different values to get what you want)
To achieve this you will need to use css on your <h1>.......</h1>
<style>
h1 {
margin-top:20px;
}
</style>
I wonder how you would remove the space around text, I know this can be achieved by line-height. But space is always kept either above or below the text. Is there some dynamic way to do this? Either plain CSS or SASS works for me.
Thanks in advance :)
Your developer console tells you which property is responsible for the space.
In your case its the margin that is defined on the element. A simple
h1{
margin:0;
}
will fix this.
In case you wonder, where this margin comes from - some of the elements, like headings come with predefined margins & paddings that are applied by the browsers automatically. In this case, the source in the styles section of your webdev console states "user agent stylesheet".
write CSS
h1 {
margin: 0;
}
It will remove the default margin for h1 getting applied from browser.
Conditions
I'm essentially trying to replicate the webpage output for this assignment. Pictures used in webpage are here. That's basically my ultimate goal in all of this, getting this webpage as close to the Desired Output as possible. Not just similar, but as close to identical as possible.
This needs to be done in a way that doesn't just superficially reflect the intended output, but is done in the "right" way. For example, I could very well just adjust padding and margin sizes until it looks the way it needs to be, but that wouldn't solve the overarching problem and makes for badly styled code.
This has to be predominantly done with CSS. Only organizational HTML tags can be used and no packages or code can be imported.
Problem:
Each review is supposed to be separated by 20pt of vertical distance. This isn't working out for whatever reason.
It might have something to do with the fact that I've got some of my reviews looking like this when I need them to look like this.
That might have to do with the fact that padding is applying only to the text when it needs to apply to the review as a whole.
You can see in the first image that the blue bar, which represents padding, is only under the text and not under the image and the text.
I'm wondering if this has something to do with img elements being inline elements and not block elements? Any advice you have on this would be greatly apprecaited.
Code:
CSS
HTML
The padding does not work with your images because you have
float: left
applied to them. If you take that property out, the padding will take the img into account.
On a side note: maybe you should reconsider your html structure. Logically the review text and the reviewer belong together, so they should be enclosed by some parent div element. Just look at the real rotten tomatoes website and how they structure their reviews and let that "inspire" you ;-)
But basically it should be something like this:
<div class="review">
<div class="review_quote"></div>
<div class="review_source"></div>
</div>
Well structured HTML really helps with styling. HTML and CSS go hand in hand, so if your HTML is messy your CSS will be messy and "hacky" too. So first make sure your HTML makes sense (grouping, nesting, etc.) first.
add this class in your css
.reviewer-text::after {
clear: both;
content: "";
display: block;
}
Well.. your padding in css is refering only to class 'reviewer-info'. Elements with class 'reviewer-text' got their padding set to 8px;
If you want to have result for that block like on the picture apply bottom padding for 'reviewer-text'. Change:
.reviewer-text {
padding: 8px;
}
to:
.reviewer-text {
padding: 8px 8px 20px 8px;
}
See: https://fiddle.jshell.net/a9xxoz8L/1/
Currently I have a list that has an H3 heading above it (which I can't really remove easily, it's auto generated by a cms) and looks something like this
Headline
|
|
List stuff
and I want to get rid of the pipes. They seem to be "built in" to the <h3> tag, anyone have any idea what CSS property of h3 would get rid of this?
H1, H2, and H3 tags all inherently have a margin and padding added to them by browsers.
You can test this by putting a background on the H1, H2, and H3 tags in css and looking in different browsers.
To remove the "pipe spacing" you should:
h3{
padding: 0px;
margin: 0px;
}
Then you can re-add whatever you would like since CSS is a one-way execution path. Consequent CSS values will overwrite base-level CSS.
Another option that removes the space below the text is as follows:
h3
{
display:inline;
}
Try setting the "border" style property on the H3 to
border:0;
It's possible that the "pipe" is actually a border on the headline, a border-right property, that you can modify or override.
Alternative: A true pipe that the CMS generates (I'm assuming you've checked the HTML source and this is not the case, but good to ask)
Can you select the text and see if it is a true pipe character, or rather just a visual element?
Other Alternative: Some kind of CSS content property. More rare, since most browsers don't support it.
In Addition to #Jonathan answer, You must add:
p{
padding: 0px;
margin: 0px;
}
That solved my problem.
If the pipes are actual text, you're not going to be able to get rid of them without using some form of JavaScript.
If the pipes are a background image for the H3, you can use this to get rid of them:
h3
{
background-image: none;
}
Set height according to your requirement along with font size and it will remove the padding if the height is lesser than the font size takes!
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?