I want to decrease the vertical spacing between header and paragraph.
<td style="width:427px;">
<h2 style="color:#156CA4">Quotation</h2>
<p style="color:#00A651">abc Technologies Pvt Ltd</p>
</td>
Try adjusting the line height property using CSS. I would recommend giving it an id though if you only want it to affect this p tag in particular
p {
line-height: 0px;
}
There is also the possibility of negative margins (which isn't considered best practice, but will work in your case):
p {
margin-top:-5px;
}
You have to remove the margin from both h2 and p.
h2{
margin-bottom: 0;
}
p{
margin-top: 0;
}
here is a jsfiddle to see the results
Simple use following css will remove default all padding and margin. Because here h2 use default spacing.
*{
margin:0;
padding:0;
}
Previous result:
<td style="width:427px;">
<h2 style="color:#156CA4">Quotation</h2>
<p style="color:#00A651">abc Technologies Pvt Ltd</p>
</td>
New working Result:
*{
margin:0;
padding:0;
}
<td style="width:427px;">
<h2 style="color:#156CA4">Quotation</h2>
<p style="color:#00A651">abc Technologies Pvt Ltd</p>
</td>
Working Fiddle
Use margin-bottom style inside h2
margin-bottom:-10px;
To decrease space we should use values in negative.
Add this style below your html, i thing it can be usefull
<style>
h2, p {
margin: 0;
}
</style>
Use the Adjacent sibling combinator
h2 + p {
margin-top: 0;
}
Which makes paragraphs that immediately follow an H2 headline have a top margin of 0.
You may also have to alter the bottom margin of the headline.
I faced the same issue. Setting Line height on the p and all heading tag works for me.
h1,h2,h3,h4,h5,h6,p{
margin: 0; // if there is margin
padding:0; // if there is padding
line-height: 0px !important; // you should set line height according to your requirement.
}
This will affect all children's components.
Related
I set the body to margin : 0; as well as in padding. Would you mind if I ask if I create a p element it will create their own respective padding.
Thanks I'm a newbie, trying to figure it out
Actually, it's not a Padding, it's a Margin.
Because <p> tag has a default css values which is:
/* Default CSS Values */
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
So the space between <p> tags is coming from margin-top and margin-bottom, and if you want to clear this space just add a css rule like this:
p {
margin: 0;
}
u can reset Paragraf like body.
So u can set css for paragraf.
p {
margin: 0;
padding: 0;
}
option 2
if u want reset all Tag like p, img, a, ul, li or etc. U can try Meyer Reset CSS
Thanks
Your question isn't too clear, do you mean something like this?
p {
margin: 0px;
padding: 0px;
}
You can also use inline tags. Inline tags will override all other load time styles.
<p style="margin: 0px; padding: 0px">
Hello World
</p>
Even after reseting margin and padding the h1 tag still has mysterious unwanted gaps before and after its content
see code pen
Adding
line-height:0.7em;
rule approximately resolve the problem, however
it looks unclean
there are still few unwanted pixels
not sure that this will not cause issues with different font size or units.
Is there a clean and universal solution, maybe using sass/less mixin with math operations?
HTML:
<h1>Some text</h1>
CSS
* { margin:0;padding:0; }
h1 { font-size:25em; }
the h1 tag by default has line-heigth property you can adjust it like
h1 {
font-size: 25em;
line-height: 0.7em;
}
updated example
* {
margin:0;
padding:0;
}
h1 {
font-size:25em;
line-height:0.7em;
}
<h1>Some text</h1>
<p>lorem ispum</p>
Since the h1 is a block level element, it has whitespace on the sides by default. You can add display: inline to get rid of it, but it's positioning will be affected.
Be sure, that your css rules of margin: 0; padding: 0; is on. Make it !important just for test.
line-height: 1; should fix the problem (or line-height: 0).
You can set height for h1 element
h1 {
font-size:25em;
background-color:pink;
line-height:0.8;
}
What you can do is just add line-height
h1.demo {
padding: 0 !important;
margin: 0 !important;
line-height: 40px;
font-size: 40px;
}
<h1 class="demo">Some Text</h1>
In my case, the solution I had found was that, I had set a global line-height value which was messing with everything else. And even apart from that, I realized that just like margin and padding, there's even default line-height values to elements.
So one thing you could do is, set their "line-height: normal" or "line-height: initial" to individual elements or even just globally (latter might yield better results).
If that doesn't work, just manually enter any line-height values that seem to work for you although that's not the most optimal solution. It generally means somewhere you have a line-height setting that's overriding the same for other elements or is just messing with the spacing of other nearby elements, that share a border with it.
If I only add a 1px padding to a div around a heading, then this makes apparently a huge difference (http://jsfiddle.net/68LgP/).
html:
<div class="pad0">
<h1>Text</h1>
</div>
<div class="pad1">
<h1>Text</h1>
</div>
css:
.pad0 {
background-color: #E9E9E9;
padding: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
}
Why is that so? I really would like to achieve a similar effect to the 1px padding but with no extra padding added.
This is due to the margin collapsing
Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.
You can find further information also on w3c site.
Two margins are adjoining if and only if [...] no line boxes, no clearance, no padding and no border separate them [...]
So if you apply a padding-top (1px is enough), as in your second example, the margins are no longer collapsed. An easy solution, as already suggested, is to remove the default margin of your heading elements and apply a padding instead.
It's to do with the default CSS applied to Heading1 element. It already has a padding/margin applied to it.
If you reset it, you can see the result you're after: http://jsfiddle.net/68LgP/8/.
h1 { padding: 0; margin: 0; }
.pad0 {
background-color: #E9E9E9;
padding: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
}
Please see the updated CSS here
.pad0 {
background-color: #E9E9E9;
padding: 0px;
margin: 0px;
}
.pad1 {
background-color: #E9E9E9;
padding: 1px;
margin: 0px;
}
h1
{
padding: 0px;
margin: 0px;
}
set h1 margin to 0
h1 {
margin: 0;
}
It is now keeping the margin of the h1 within the DIV. The h1 has default top and bottom margin of around 21px, so when you add 1px padding to the DIV, it now looks like 22px
<div> is a block element, which means that it both starts and ends with a line break. I beleive that this is contributing to your problem - you may want to swap to <span> tags, although I'm not sure if this will solve the problem.
You could use CSS Reset which resets all CSS settings, including this kind of problems. Recommended for any site.
How can CSS Reset file solve your problem? As you can see, in the first paragraph, h1 is included, and it's given margin:0 which is needed for reducing the difference in problems like yours.
I have a page with a image. I want set it top of page.
<HTML>
<HEAD>
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</HEAD>
<BODY style="background-color:#3baa35;" >
<IMG border=0 src="home.PNG" ></p>
</BODY>
</HTML>
But there is one line of space between the top of the page and the body.
How to set image top of page?
Put some styles:
p { margin: 0; padding: 0; }
This is because each browser has its own default CSS values. You can use Eric Meyer's reset CSS to have the same display on all the browsers :)
Link to Reset CSS
Don't forget to put border: none; as well
IMO, your css properties are okay .
as
Margin is on the outside of block elements
We use padding for inside of block elements .
By default, images align their bottom edges with the baseline of the text.
just use to get rid from this
img { /* Or a suitable class, etc. */
vertical-align: bottom;
}
Hope it will help.
Here is a hack to your answer.
Your p tag inherits the font-size from the a tag and thus assigns the margin to a size of 1em which is the size of the letter M of the parent elemt i.e THE a tag
So if you set the font-size of a to 0 then the font-size of p will be 0 and hence the margin too.
Sounds pretty cool right? Here's a working fiddle...
FIDDLE
a{
font-size:0pt;
}
WARNING: This is just for Demo purposes and should not be used in actual working code.
With HTML and CSS I have this vertical space between a p tag and an image. It looks like this:
See that extra vertical space between the hello and the image? How do i remove that? I know I can absolutely position the image closer up to the hello but I would like to know what's causing the space.
My code:
HTML:
<div class="Box">
<p> hello </p><img class="contextimg" WIDTH="50" HEIGHT="50" SRC="pic.jpg">
</div>
CSS:
.Box //this is the parent div
{
background-color:red;
width:60px;
margin:0px;
margin-bottom: 0px;
padding:0px;
}
.contextimg //this is for the image
{
position:relative;
margin:0px;
padding:0px;
line-height:0px;
}
Note: I've also tried to set the body's margin and padding to 0 but it didn't work.
It's common for browsers to give paragraphs a default margin. So just take it away.
Give the <p> a margin of 0:
.Box p{
margin: 0;
}
Check it here: http://jsfiddle.net/aG27X/
That's the default padding/margin of p element, try using
.Box p {
margin: 0;
padding: 0;
}
You should reset browser defaults before designing any webpage, if you want a quick solution than using
* {
margin: 0;
padding: 0;
}
Will suffice your needs, you can also google out for CSS reset stylsheets, these stylesheets will reset each elements precisely
Set the padding and margin top/bottom of the <p> tag to 0. <p> tags automatically have a default padding/margin set, in case you dont overwrite it by something else.
p {
margin: 0;
padding: 0;
}
p stands for paragraph. the paragraph automaticly adds space like this: Fiddle
and you can remove it like this: fiddle
I can't tell you what your problem is, but from this fiddle: http://jsfiddle.net/u6C9E/
p { margin: 0; padding: 0; }
works.
If you have any image above and/or bottom of the paragraphs, make the paragraphs in two class.
HTML:
<p> class="first">Your 1st Paragraph</p>
<p> class="second">Your 2nd Paragraph</p>
The CSS :
p.first {
text-indent: 2em;
margin-bottom: -5%;
}
p.second {
margin-top: -5%;
text-indent: 2em;
}
Use "%" to let it still looking good in responsive web...