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.
Related
I'm specifically wondering about this page: https://podato.herokuapp.com/#/podcasts/http%3A%2F%2Ffeeds.twit.tv%2Ftwig.xml/
Why is the text of each item not alligned with the image on the left?
But a more general question: how do I debug this sort of thing? What's the best way to find out where whitespace is coming from?
For debugging you could use the built-in developer tools.
For official guides:
Chrome: https://developer.chrome.com/devtools http://www.html5rocks.com/en/tutorials/developertools/part1/
Firefox: http://www.howtogeek.com/105320/how-to-use-firefoxs-web-developer-tools/
https://developer.mozilla.org/en/docs/Tools
Also for Firefox i know there is Firebug, a tool developed to make debugging somewhat easier.
To answer your question, take a look at Vikas Kapadiya's answer, in your body tag is a line-height: 1.5; declared. Try and change it in the developer tools to see what happens.
Edit
A possible solution could be wrapping the span elements in a seperate div. I'm thinking of adding a negative top margin. Feel free to come up with other methods, this is the first one i think of.
The reason i'd choose for a div is because it is a block element, whereas span elements are inline elements, which are unable to add a negative top margin to. Also i noticed that you use a data-reactid? I guess it would be a bit cleaner if you could add that to the container div, so the span elements (and the br tag) are free of the data-reactid. Don't know if that is desirable, but see for yourself what would be best.
div.data {
margin-top: -5px;
width: 100%;
}
Try this in basscss line no 121
body {
line-height: 1;
}
I'm putting a floating picture on my friends blog real quick, but changing the margin values doesn't do anything.
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
And the structure:
<div style="margin-bottom:0px;" id="pic" ><img src="{image:Sidepicture}" style="width:200px;"</a></div>
When I change the margin values, the picture stays at the top left hand corner no matter what I do.
The culprit is likely position: fixed;
#pic{
z-index:9999999999999999;
position:fixed;
width:200px;
background-color: transparent;}
Is this all the code there is for pic? It seems that #pic is stuck to top: 0, left: 0
Try just removing the position: fixed line entirely and see what happens
If doesn't work out, also try adding position:relative;
Because you should be putting the margin on the <img />, not on the <div> surrounding the image (#pic).
#pic img { margin: 20px; }
... will do what you want it to.
The very least you should have done is validate that your HTML and CSS are actually valid. There are many errors in the code and style that you supplied. Unclosed Tags, Closed tags, Unmatched elements, styles without contents, invalid styles, Incorrect declarations and so on.
Its also a bit of a jumbled mess, with interwoven styles and script and parts of reset scripts towards the end, all sprinkled through with optional block and cycle contents, making helping you very difficult. Keeping your style separate from your code and grouping it into one block would help you narrow it down a bit as right now styles are all over the file, making it easy for anyone to miss the offending line.
I can only suggest that one of the later styles in your CSS after the style for img you are trying to apply. (somewhere after line 152) is overriding the margin that you are setting at 152. You can use the developer tools built into the browser and look at which styles are being applied to your element and which line in the file they come from. If your pix style is not applied then you will at least have an idea what other styles are and this will allow you to narrow down your investigation.
another way to find the offending line would be to to comment out the styles after line 152 and then comment them back in a few at a time, until you find the class causing the issue.
The quick and dirty fix is of course to put !important after your margin
You can also run your page through the CSS Validation and HTML validation to help you find any of the errors that may also be having an effect.
Okay So I made a template with some CSS & HTML. However, if you look between the menubar, there's a bunch of white space. Also the content and sidebar are weird. If you look at the top there's a bunch of padding at the top but I didn't apply any padding anywhere! Help!
Link to site http://techtubecentral.com/demo/
Try this, Hope it will work
<style type="text/css">
ul{
margin:0px;
}
</style>
Padding and margin is specified by default. It is part of what was originally generated by the W3C consortium. All you need is a CSS Reset sheet.
http://www.cssreset.com/
You can attach this to your site as a separate file, for example reset.css. Or you can jsut copy paste the reset code to the top of your styles.css file.
Naveen's solution is correct b/c there is default margin coming from the browser's style sheet. Add
* {margin:0; padding:0;}
as the first line in your style sheet - it's a simple reset of these properties on all elements, and you will have no more trouble with "phantom" paddings and margins cascading down from the browser stylesheets.
When using a tag you will find that the browser will automatically adding a margin and sometimes padding that may not be needed.
Try adding margin: 0px; and padding: 0px; just as good practice.
I am trying to code a page, and for some reason i have a random css spacing issue for my list that i created. On the bottom right i have a random space between the list and its div.
I am styling it fine i think but my code is here at jsFiddle
and it works fine there for some reason. Any ideas?
If needed i can supply the entire page link.
I want that whole entire css list to span accross the entire div but it has a huge gap between the left wall of the div and its list.
The list on the page you link to needs to have its padding (and potentially its margin ... some browsers have different default styles) cleared. Here are some rules you could use to fix this:
#navlist {
list-style-type: none; /* Removes default list style */
margin: 0;
padding: 0;
}
I highly recommend getting the Firebug extension for Firefox. It makes debugging layout issues like this very easy. It also helps you see whether the style rules you are writing are being overridden by a more specific rule elsewhere in your style sheet.
As an aside, you shouldn't be using the center element. That element has been deprecated, and should be handled via your style sheet like so: text-align: center;
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!