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>
Related
I try to remove padding between two span elements which is not working, i did padding and margin set to 0px but didn't work
span {
padding: 0px;
margin: 0px;
}
somehow div container occupies some default padding which creates problem, someone can help to solve this issue
http://jsfiddle.net/f30boLhu/
here i want to remove black marked space between two texts
you can play with line-height or add a height to .bonus
.bonus {
font-size: 1.4em;
display: block;
height: 20px;
}
Try to add some style with existing code for your second span whose having promise class, See below CSS code -
Or try this JSFiddle
CSS Code-
.promise {
position: relative;
top: -10px;
}
Try to put span tags together like:
<span>one</span><span>two</span>
Without any separate between them
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.
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.
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...
For some reason there is an unusual border on my page. I'm unable to find the cause for it in the code:
http://danie1.me/temp/
Any idea how this can be fixed?
You have to update your <body> styles like this:
body {
color: green;
margin: 0;
padding: 0;
}
And it's generally a good idea to use some kind of CSS Reset to avoid a lot of troubleshouting in different browsers.
All elements by defauls has some style. Tag body by default has margin not 0. So
body { margin: 0px; }
Your body has extra margins. It is better to use a CSS Reset, a simple one:
* {margin: 0; padding: 0; list-style: none;}
Or just to body:
body {margin: 0; padding: 0; list-style: none;}