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!
Related
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.
I have this heading:
<h3>Contact info</h3>
Writing a class or a href to it it's not an option. It is in wordpress' user-edit.php file. I want to hide this element on the user's profile pages.
Is there any solution something like this?
h3["Contact info"] {
display: none !important; visibility: hidden;
}
Thank you for your help!
There is no way to can match an element based on a complete absence of attributes.
The closest you could come would be to test for the absence of some specific attributes.
h3:not([id]):not([class]) { }
Use the nth-of-type pseudo class. Suppose the h3 you want to hide is the fourth h3 element under the parent h2 heading, and that h2 heading is the third h2 on the page (I'll assume you only have one h1 heading). Then you use:
h2:nth-of-type(2) h3:nth-of-type(4) {...}
Just bear in mind that if you later add a new h3 heading before the one you are hiding, so changing the count, then you will have to change the number in the brackets.
But don't use display none and visibility:hidden together. Choose the one you actually want - display:none closes up the space the hidden element was taking, visibility hidden reserves the space even while hiding the element. They are contradictory. Also don't use !important unless you absolutely have to (see other StackOverflow answers as to why).
if you only have one h3
h3{
display: none !important;/* visibility: hidden;*/
}
otherwise you could use attr selectors like h3[title~=yourTitle],
another option is to use child selectors
div > h3
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 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.
I want apply margin property for my html newsletter
But Gmail ignores this CSS property
Is there any way to add margin to html element ?
Thanks
With HTML email you need to go back to the dark ages and use tables. Sad but true.
Rock Solid HTML Emails will help you.
Tables are the best things you can use for newsletters. Also remember that if are you using CSS it's better if you do it inline. In other words, like this:
<table style="margin: 0 0 15px 50px; color: #FFFFFF;"></table>
Do not have CSS in the header.
Yes #Alex is right when he says use in-line CSS. One thing though, No CSS shorthand is used: instead of using the abbreviated style rule margin:0 0 15px 50px use margin-top:0; margin-right:0; margin-bottom:15px; margin-left:50px;
Check http://www.sitepoint.com/code-html-email-newsletters/
As of 8/30/2022 Gmail supports the margin style property.
see https://developers.google.com/gmail/design/reference/supported_css