In HTML, the li element needs to be inside an accepted parent element, mainly ul or ol. It’s not valid code to have them inside anything else, or on their own. It may appear to work ok, but that’s just by chance, and shouldn’t be considered an option.
It’s a good idea to look up these elements when you have questions like this—such as in the specs (which are hard to read, admittedly) or on sites like MDN.
Never.
But your question makes it look like you could also be confusing HTML and CSS. You can style them separately in CSS, of course. That’s a different matter entirely.
Yes, I updated my post to clarify that we are talking about HTML here. You can’t have a li without an ul or ol element in HTML.
In you CSS, you can style them individually. That’s a different issue. So set whatever styles you need for the ul, and then set styles for you lis, as you showed.
ul li {} and li {} are basically the same thing. They are are both rules for styling the li. The difference between your two examples is that the ul has a default top margin, set by the browser. (Browsers place default styles on elements, which you have to override if you don’t want them.)
In this case, if you don’t want the default top margin on the ul, you’d add ul {margin-top: 0;}.
I see that you’re learning all this, which is great. I think the one mistake you’re making is to see something happen, make an assumption about what the cause is, and then working on that basis. It would be better to keep an open mind and just find out why things look different in those two scenarios.
Yes. So it’s worth finding out all the defaults that browsers set, because it gets a bit confusing otherwise. Various browsers set different default margins and paddings on uls etc. The make headings bold, underline links and so on.
At some stage you’ll come across what’s know as a “CSS Reset”, which is basically a bit of CSS that removes many of the browser’s default styles. It’s not really necessary, and some thing it’s a bad idea, but the important thing is to recognize that browsers set default CSS that you may not want.
So, what’s the best practice, should I keep Padding bottom:with [ul li together], or should I keep it by itself separate with [li and ul being by themselves?
Either way, [ul,] or [li] is going to need another tag separate by itself. Maybe it doesn’t make a difference.
Generally, “best practice” in CSS would be to use as little code as is reasonable. If you are happy for alllis to get a particular style, then li {} is fine.
But let’s say you want that padding to appear on lis in uls but not on lis in ols. Then you’d need ul li {}, so that the browser knows you’re only styling lis inside uls.
Or if you only want that li style on lists in your .sidebar div, for example, you’d want something like .sidebar li {}.
Because the content of an iframe is coming from another page (and possibly another site), it can only be styled on the original page; you can’t influence the appearance of content within an iframe.