<p>Text</p>
<ul>
<li>One</li>
</ul>
<p>Text 2</p>
How do i remove the vertical space between paragraph and the list.
To be more specific - how do I reduce the bottom margin/padding of the p tag ONLY when followed by an unordered list. All the answers I see here remove the space after all p tags - that's not what was asked.
You can use CSS selectors in a way similar to the following:
p + ul {
margin-top: -10px;
}
This could be helpful because p + ul means select any <ul> element after a <p> element.
You'll have to adapt this to how much padding or margin you have on your <p> tags generally.
Original answer to original question:
p, ul {
padding: 0;
margin: 0;
}
That will take any EXTRA white space away.
p, ul {
display: inline;
}
That will make all the elements inline instead of blocks. (So, for instance, the <p> won't cause a line break before and after it.)
One way is using the immediate selector and negative margin. This rule will select a list right after a paragraph, so it's just setting a negative margin-top.
p + ul {
margin-top: -XX;
}
This simple way worked fine for me:
<ul style="margin-top:-30px;">
I got pretty good results with my HTML mailing list by using the following:
p { margin-bottom: 0; }
ul { margin-top: 0; }
This does not reset all margin values but only those that create such a gap before ordered list, and still doesn't assume anything about default margin values.
p, ul{
padding:0;
margin:0;
}
If that's not what your looking for you'll have to be more specific
You can (A) change the markup to not use paragraphs
<span>Text</span>
<br>
<ul>
<li>One</li>
</ul>
<span>Text 2</span>
Or (B) change the css
p{margin:0px;}
Demos here: http://jsfiddle.net/ZnpVu/1
Every browser has some default styles that apply to a number of HTML elements, likes p and ul.
The space you mention is likely created because of the default margin and padding of your browser. You can reset these though:
p { margin: 0; padding: 0; }
ul { margin: 0; padding: 0; }
You could also reset all default margins and paddings:
* { margin: 0; padding: 0; }
I suggest you take a look at normalize.css: http://necolas.github.com/normalize.css/
I ended up using a definition list with an unordered list inside it. It solves the issue of the unwanted space above the list without needing to change every paragraph tag.
<dl><dt>Text</dt>
<dd><ul><li>First item</li>
<li>Second item</li></ul></dd></dl>
Related
html
<ul class="social">
<li><a class="html5" href="#html5"></a></li>
<li><a class="twitter" href="#twitter"></a></li>
<li><a class="facebook" href="#facebook"></a></li>
<ul>
Everything works, but not fitted to margin? I need it flush like the rest of my page...any advice?
css
.social ul
{
list-style-type:none;
margin:0;
padding:0;
}
.social li
{
display: inline-block;
}
In the CSS, you are trying to set margin and padding to "0" but since your path is wrong
-> .social ul
I think it should be:
-> ul.social
In the fiddle the <ul> still has the default 40px of left-padding and 16px of top/bottom margin, so just add margin: 0; padding: 0; to the unordered list. Every browser adds this padding/margin to lists - I'd suggest using a CSS reset, so you can explicitly reset the default browser styling for each element. Look at this for more info
Secondly inline-block elements are white-space dependent so if you comment out, or delete the white-space in your mark-up (between the <li>) the horizontal space between the images will be reduced.
Edit: It does display inline horizontally .. the reason why margin: 0; padding: 0; didn't take effect is because .social ul implies the unordered list is a descendant of some element with the class .social when it isn't, so the default padding/margin remained.
On http://www.w3schools.com/cssref/playit.asp?filename=playcss_ol_list-style-type&preval=none, a nice overview is provided for the different list-style-type values.
However, for the value none, it still reserves some horizontal space for the empty list symbol. Is there a way to remove this horizontal spacing, so that the text actually moves to the left as if it was no list? I would like to use text-align:center on the list items, and this horizontal spacing makes them not really centered. And I need to use <ul> because the CMS brings it in that way.
Basically, by default list-style-type:none does a visibility:hidden on the bullets, while I would like to achieve display:none on the bullets instead. What would be the proper way to do this?
It's the browsers default styling that's adding that space, just use a CSS reset to reset all of the browsers default styles. Most block elements have some default margin/padding .. even the <body> element has 8px of margin applied to it by default.
Here is a link to Eric Meyer's reset: http://meyerweb.com/eric/tools/css/reset/
Just to see for yourself, add:
ol {
margin: 0;
padding: 0;
}
/* This would be declared in the above reset */
Make sure to add browser reset styles before you start working with CSS.
You have to add this:
ol, li {
margin: 0px;
padding: 0px;
}
for this question.
A better way to this these days I found recently is to set the <ul> to display: contents;. Thus the css should look something like this:
ul {
list-style-type: none;
display: contents;
}
ul > li {
padding: 0;
margin: 0;
text-align: center;
}
This should do the trick.
add
margin:auto;
float:none;
display block; to your css for the ol element, this will remove the padding and align the elements in the centre
I have below HTML in my web page:
Forum
<ul>
<li> Stack</li>
<li> OverFlow</li>
</ul>
And as you could see below, I get the items listed perfectly, but there is a fixed gap between <UL> and <LI> elements.
Is there a way, I can reduce this gap? i.e. gap between "Forum" and "Stack" text in attached screen?
The gap does not exist between UL and LI elements, but between the Forum text and the UL element. Most browsers define a default margin around certain elements, like the UL.
You get rid of it with CSS:
ul { margin: 0; }
or if you just want to reduce it, for example this one will set 0 margin for horizontal, 5px for vertical:
ul { margin: 5px 0; }
Try this (don't know if it's the problem with you):
<ul><li>
your first li element </li><li>
your second li element</li>
</ul>
There are spaces that you can't avoid on HTML code if you don't "avoid" it, let's say.
Take a look here.
In addition to kapa's comment, if you enter a negative value for the margin it will reduce the gap.
In css:
ul { margin:-20px;}
Yes, you can use CSS. In your CSS, specify the margin or padding properties to adjust the spacing between your LI and UL elements.
LI
{
margin: 0px;
}
This will decrease the vertical distance, but not the horizontal.
ul { margin:-15px 0;}
It is a combination of Andrew and kapa's.
Here's how it looks.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
Possible Duplicate:
Unwanted margin in inline-block list items
How to remove “Invisible space” from HTML
Why do the inline-block list items have a space in them? No matter how I make my list items into a menu, I always get spaces.
li {
border: 1px solid black;
display: inline-block;
height: 25px;
list-style-type: none;
text-align: center;
width: 50px;
}
ul {
padding: 0;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
I have seen this and answered on it before:
After further research I have
discovered that inline-block is a
whitespace dependent method and
is dependent on the font setting. In this case 4px is rendered.
To avoid this you could run all your
lis together in one line, or block
the end tags and begin tags together
like this:
<ul>
<li>
<div>first</div>
</li><li>
<div>first</div>
</li><li>
<div>first</div>
</li><li>
<div>first</div>
</li>
</ul>
Example here.
As mentioned by other answers and comments, the best practice for solving this is to add font-size: 0; to the parent element:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline-block;
}
This is better for HTML readability (avoiding running the tags together etc). The spacing effect is because of the font's spacing setting, so you must reset it for the inlined elements and set it again for the content within.
Solution:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline-block;
}
You must set parent font size to 0
I would add the CSS property of float left as seen below. That gets rid of the extra space.
ul li {
float:left;
}
Actually, this is not specific to display:inline-block, but also applies to display:inline. Thus, in addition to David Horák's solution, this also works:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
display: inline;
}
Another solution, similar to Gerbus' solution, but this also works with relative font sizing.
ul {
letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
display: inline;
letter-spacing: normal; /* Reset letter-spacing to normal value */
}
I had the same problem, when I used a inline-block on my menu I had the space between each "li" I found a simple solution, I don't remember where I found it, anyway here is what I did.
<li>Home</li><!---->
<li>News</li><!---->
<li>About Us</li><!---->
<li>Contact Us</li>
You add a comment sign between each end of, and start of : "li"
Then the horizontal space disappear.
Hope that answer to the question
Thanks
Even if its not inline-block based, this solution might worth consideration (allows nearly same formatting control from upper levels).
ul {
display: table;
}
ul li {
display: table-cell;
}
IE8+ & major browsers compatible
Relative/fixed font-size independent
HTML code formatting independent (no need to glue </li><li>)
just remove the breaks between li's in your html code...
make the li's in one line only..
If I have user-generated content, such as:
<p>my paragraph</p>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
This outputs with a paragraph gap between the end of the paragraph and the list like so:
My paragraph:
item1
item2
I know I can get rid of the gap in my CSS by setting margin-top on the UL tag and margin-bottom on the p tag, but is there a way to do it without affecting the margins between actual paragraphs?
The content is user-generated with a limited set of tags available and no fonts, sizes... available so all formatting should be done in CSS, if possible without having to put classes in the tags.
I know, because of the way margin collapsing works in CSS, I could usually set
p { margin-bottom:0; }
li { margin-top:0; }
The separation would be correct in both cases as the margin-top property on the p tag would still be 1, but I already set margin-top to 0.2em for a smaller gap between h2 and p tags.
This is a perfect use case for the sibling selector. However, it doesn't work in IE6 or IE7.
p { margin: 0; }
ul { margin-top: 0; margin-bottom: 0; }
p + p { margin-top: 15px; }
p + ul { margin-top: 3px; }
ul + p { margin-top: 3px; }
So, I'm setting the relevant margins to 0 on the p and the ul, and then telling any compliant browsers to look for a p that's after a p and add a top margin to it. Same for a ul after a p (though it's a small margin), and a p after a ul (large margin again).
Again, this doesn't work in IE6 and 7, so you may want to use conditional comments to get a decent (if not perfect) look on those browsers.
If you want to target ul elements, then use an adjacent sibling selector.
p + ul { margin-top: 0; }
There isn't any decent way to set the p bottom margin this way, but you could use a negative margin on the ul if needed.
The other answers work well, again, as they said, except for IE6/7. However, realize that you will not affect margin between paragraphs if you set your p bottom margin to 0 as long as you set your top margin for p to be the greater of the two values that your margins are currently. As long as you don't have an issue setting the ul top margin to 0 then your p margin spacing will not be affected. So let's say you have this currently defined:
p {margin: 10px}
Setting it to this:
p {margin: 10px 10px 0}
Will not affect your margin between p tags (which seems to be your concern), as the 10px bottom margin is collapsing with the top to make the gap only 10px. If your bottom margin is currently set greater than the top margin, you will need to change your top margin to the greater value to see the same spacing you have been. Now, if you want some bottom margin on the last p then you will have to accommodate for that.
If what the user types ends up in a specific wrapper div that you can target (via id or class), then you could just set these styles for p and ul to apply only within that wrapper if that is a concern.
This depends on the rest of your code, but it should be ok for you to do:
p{ margin-bottom:0; }
You may think this will affect all of the rest of your paragraphs, but due to CSS's "margin-collapsing" feature it actually shouldn't - provided you're in standards mode with a valid DOCTYPE.
If you have construction like below:
<p>my paragraph</p>
<ul>
<li>item1</li>
<li>item2</li>
</ul>
And CSS like:
p { margin: 0 0 25px 0; }
it can cause a gap between P and LIST.
I resolved this problem using a negative margin:
p + ul { margin-top: -20px; }