How lists and margins works

HTML & CSS
1

Why do the bullet points of my lists reside inside the actual margin of the div the list sits in?

site: http://designingyours.com/KMMED/event.html

I try things like text indent, and the bullets points dont move but the text does.

what is going on here?

2

Hi,

List markers are always placed outside (list-style: outside) the principal box (although I never thought that was a good idea anyway) and to move them inside you would need a suitable left margin or padding.


.event_cs {
    line-height: 12pt;
    list-style-type: square;
[B]    margin: 0 0 0 2em[/B][B];[/B]
padding:0;



}

Or you could use list-style:inside which moves the markers inside the principal box but has the disadvantage the bullet markers then become similar to inline elements and the text will not align itself neatly but wrap under the bullet on the following lines.

Using a margin-left is usually the best method.

3

Thanks that worked!

Also why can’t I put <br/> tags after </li>?

Like this:

<ul class=“event_cs”>
<li>Big Savings on your educational expense budget</li><br/>
<li>Gathering groups from local facilities - all around saving</li><br/>
<li>Invite local vendors to underwrite cost & provide product presentation</li>
</ul>

I’m getting validation errors, and dont know how else to insert a break there.

4

UL should contain List elements as its direct children; so that is why you cannot use BR outside of the LI.

5

As Robert said above, it’s invalid and is simlar to trying to place breaks between table-rows and not inside the td.

You could put the break inside the list item itself but then that would mean you are using breaks for presentation which is wrong. The list is already a block element and will give you a newline automatically. If you want more space then just apply a larger bottom margin to the list element instead.

You will rarely use breaks in a page and they are mostly used for separating things like form items, addresses and structures like poems. Most everything else has structure that lends itself to simply increasing the margin of the elements in question.

6

Okay sounds good, still a beginner here, and a lot of times I think beginners look at the obvious.

“I need to make extra space between these two elements…okay their is a <br> tag that creates lines breaks…”

It’s hard to get out of that mind set I feel, but I’m working on it!

Thanks guys