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; }
Related
Need a guidance from CSS pro. how can i get the expected result. Appreciated for any help.
What i've tried so far : JsFiddle Demo
Simply give your <li> elements a margin. For example:
ul li {
margin: 0 0 10px;
}
To avoid extra spaces below the list you can remove the last margin with the last-of-type psuedo selector:
li:last-of-type {
margin-bottom: 0;
}
Assuming that you are content with the static fixed-width layout, you can also force the widths of all list items with:
ul li {
width: 145px;
}
Here your adjusted fiddle.
For further reference see the tutorials at w3cschools. Specifically for the CSS width and margin properties, and the last-of-type psuedo selector.
I am trying to learn basic HTML and CSS. This is the code I have currently:
http://jsfiddle.net/spadez/vvDJ9/3/
There are two issues with the code:
Currently not only is there a large gap between the list items
The list in the header doesn't have the top padding correctly applied. It should sit in the middle of the header.
Here is the relevant bit of the code:
header a { padding: 15px 20px; background-color: #16AD8F; }
This is because your lis are inline-blocks. You can, of course, redo the code and fix that using floats, for example... or get rid of the whitespace by joining lis together (</li><li>..., see here: http://jsfiddle.net/vvDJ9/6/), etc...
But there's a nice little hack to get rid of the space: set font-size: 0; to their parent ul element: http://jsfiddle.net/vvDJ9/5/
#header ul {font-size: 0;}
And to get the top padding correctly, just set your anchors to display: block;: http://jsfiddle.net/vvDJ9/9/
#header a {display: block;}
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.
<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>
Take this ul for example:
<ul>
<li>HI THERE</li>
<br>
<li>
<p>ME</p>
</li>
</ul>
When the innerHtml of an li tag is blank, the li wraps itself right up to the text.
It doesn't happen for the p tag. I'm assuming this is because p is for paragraphs which usually have white space breaks before and after.
Is there any way to remove this?
<p> elements generally have margins and / or padding. You can set those to zero in a stylesheet.
li p {
margin: 0;
padding: 0;
}
Semantically speaking, however, it is fairly unusual to have a list of paragraphs.
Look here: http://www.w3schools.com/tags/tag_p.asp
The p element automatically creates some space before and after
itself. The space is automatically applied by the browser, or you can
specify it in a style sheet.
you could remove the extra space by using css
p {
margin: 0px;
padding: 0px;
}
or use the element <span> which has no default margins and is an inline element.
In case anyone wishes to do this with bootstrap, version 4 offers the following:
The classes are named using the format {property}{sides}-{size} for xs
and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Where property is one of:
m - for classes that set margin
p - for classes that set padding
Where sides is one of:
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto
For example:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Reference: https://getbootstrap.com/docs/4.0/utilities/spacing/
There are two ways:
The best way is to remove the <p> altogether. It is acting according to specification when it adds space.
Alternately, use CSS to style the <p>. Something like:
ul li p {
padding: 0;
margin: 0;
display: inline;
}
CSS Reset is best way to use for this issue. Right now in reset we are using p and in need bases you can add any number of tags by come separated.
p {
margin:0;
padding:0;
}
<p> tags have built in padding and margin. You could create a CSS selector combined with some javascript for instances when your <p> is empty. Probably overkill, but it should do what you need it to do.
CSS example: .NoPaddingOrMargin {padding: 0px; margin:0px}
I don't why you would put a<p>element there.
But another way of removing spaces in between the paragraphs is by declaring only one paragraph
<ul>
<p><li>HI THERE</li>
<br>
<li>ME</li>
</p>
</ul>