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...
Related
I have this html:
<div class="entry-content">
<p>
<img src="foto.jpg">
</p>
<p>lorem</p>
<p>foo</p>
</div>
and this css:
.entry-content{
border: none !important;
padding: 0;
}
p{
margin: 16px 16px 0 16px;
}
.entry-content img{
margin: 0 0 0 0;
}
I tried to select the img to keep margins at 0 only and let the others p tags have the 16px but it doesn't work.
My goal is to keep all the p tags with 16px margin except the first one because there's an image inside of it i'd like to keep 100% width of the container.
Actually i do can add a class to the img tag if it helps
Thanks a lot for your help
.entry-content p>img {
// your css
}
I am not sure you want after first p tag or within first p tag but as per your code, it should be like
.entry-content p:first-child img{
//your css
}
If you have some other tag before p tag, you need to use
.entry-content p:first-of-type img{
//your css
}
You tried define your style inline, only for the first img?
Try p img {
//your css
}.. if that doesn't work then create a fiddle or codepen so we can assist you better.
My goal is to keep all the p tags with 16px margin except the first one because there's an image inside of it i'd like to keep 100% width of the container.
CSS currently cannot look down into the children of an element and then modify the parent or other elements around it. Everything cascades downward in a nested fashion.
In other words it cannot say "There is an image inside this paragraph. I need to now change the style of the paragraph that is holding this image and give it a smaller margin."
There are only really going to be two ways to accomplish this.
One: You can create a class you manually assign to all the paragraphs that contain an image. So you'd have something like this:
.entry-content img, .margin-override{
margin: 0 0 0 0;
}
Then on your paragraph you'll do like this...
<div class="entry-content">
<p class="margin-override">
<img src="foto.jpg">
</p>
<p>lorem</p>
<p>foo</p>
</div>
Which will set there to be no margin on your image or the paragraph containing the image.
Two: The other option is to use javascript/jQuery to search if a paragraph contains an image and then do an action to modify the margins of that paragraph when an image is found.
You say you're doing this for a wordpress theme. Wordpress comes packaged with jQuery by default these days so unless you've overridden that it's already in place for you. The next step would be writing a script for yourself to target these paragraphs and script enqueue if with your theme.
Here is a decent tutorial on how to add your own scripts to a wordpress theme.
.entry-content{
border: none !important;
padding: 0;
}
p{
margin: 16px 16px 0 16px;
}
.lafoto {
width: 200px;
height: auto;
margin: 0 0 0 0;
}
<div class="entry-content">
<p>
<img class="lafoto" src="https://i.imgur.com/bfMLLDz.jpg">
</p>
<p>lorem</p>
<p>foo</p>
</div>
and this css:
Just add a class to the image, or an id, its that simple.
There are many possible ways of doing it. First of all I would like to know why you are displaying the image nested within
Try this :- Instead of giving margin to P tag, assign margin to img tag, it will resolve your problem.
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>
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.
For example here http://jsfiddle.net/jitendravyas/5Wqn4/1/
I want to take <h1> over red area. How to make is possible without using image and another added more element.
using border is not necessary I just want background like this.
Without using any extra markup, there's a couple of things you could do.
Apply a negative top margin on the h1:
h1{margin-top:-150px;}
http://jsfiddle.net/5Wqn4/2/
Position the h1 absolutely:
h1{
position:absolute;
top:50px;
left: 50px;
}
http://jsfiddle.net/5Wqn4/3/
Without your body border:
Without using the border you've added to the body you can simply style the h1 as you require:
body {background:yellow;margin:0;padding:0;}
h1{
background-color:red;
margin:0;
height:150px;
}
http://jsfiddle.net/5Wqn4/5/
UPDATE
Further to your comments below, here's a sample that probably matches more what you need:
http://jsfiddle.net/SbGDQ/
You can use this CSS rule:
h1 {
border-top: 20px solid red;
display: block;
}
body {background: yellow;padding: 0px; margin: 0px;}
h1{background: red;line-height: 10em;margin: 0px;}
I have built several web sites and now i am having newbie problem that is driving me nuts...
Here's my code:
<body>
<div id="page">
<div id="page_wrapper">
<div id="header">
<h1>Heading 1</h1>
<div class="clear_both" /> </div>
</div><!-- end #header -->
<div id="main_menu">
<p>Here goes the main menu</p>
<div class="clear_both" /> </div>
</div><!-- end #main_menu -->
<div id="left">
</div><!-- end #left -->
And here's my CSS
First i have a CSS Reset template from here:
http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css
and then on another file:
body, html {
font: 10pt Verdana,Arial,sans-serif;
background: #fff;
margin: 0;
padding: 0;
text-align: left;
color: #333;
}
div {
line-height: 1.4em;
}
#page {
}
#page_wrapper {
}
#main_menu {
}
#left {
}
div.clear_both {
margin: 0;
padding: 0;
font-size: 0;
height: 0;
line-height: 0;
clear: both;
}
And on the link below there is an image screenshot on which you can see the output... (i am working on a local server)
There is an unexplainable space between the div tags I CANT REMOVE IT and it is driving me nuts... please can someone tell me how to remove it?
I have tryed adding a negative top margin but from my previous experience it is not a solution... usualy seting the margin and the padding to 0 was enough... somehow now it is diferent :S
Unexplainable DIV space
I've finaly found the problem thanks to all of You but especialy thanks to Notepad++
The problem was caused by the invisible blank spaces (from the SPACE key).
I don't know why, but according to my knowlege this is the first time multiple space strokes to be detected by the browser.. I guess the newer browsers now are registerng more then one blank space after another.
I just opened the html scripts with Notepad++ and set from View->Show Simbol->Show All Characters. Then i've deleted all of the unneccessery empty spaces and that solved my problem.
div {line-height: 1;}
h1, p {margin: 0;}
don't use units for your line height, see: Unitless line-heights for more information,
if you simply put 1.4 then the line height will be 1.4 x the font-size, this should help you get control of your gaps, obviously my code example above absolutely zero's everything and is just an example
JSFiddle : HERE
In top of your CSS file just paste this
* {
margin: 0; padding: 0;
}
Hope this helps.
<div class="clear_both" /> </div>
This is creating you a white space between Heading 1 and Here goes the main menu...
DIVs comes one below other if you have them "display: block", so even if this div don't have text, it has empty space " "...
If you delete this, all other will be like text below...
Sorry if I understand something wrong... ;)
div {line-height: 1.4em;} should be the culprit.
on your DIV or image use:
.div
{
display: inline-block;
padding:0;
margin:0;
}
and on body use:
body
{
padding:0;
margin:0;
}
I had the same problem and this worked just fine for me I just got it fixed! Hope this helps anyone searching for an answer.
Div comes with blank spaces whenever used.
In order to remove them
Use
margin-top: -10px
or whatever is convenient to your page setup.