CSS - Best practice for larger margin between all elements but smaller between same elements -
let's want have 2em vertical distance between elements (p, blockquote, dl, form, ol, ul, pre, table, etc) on page.
so throw margin-bottom:2em; on necessary elements. great.
then see several p tags, come right after each other, far apart, , i'd them have 1.5em, while keeping 2em between other elements.
what's elegant way it, while sticking we're-going-to-govern-margins-by-only-using-the-bottom-margin concept?
the selector p+p apply bottom margin in p "list" except first one. note put 1.5 margin on last p, should not have small margin, larger 2em bottom margin.
i tried :last-child selector, putting small margin value on bottom of p tags first, using p:last-child set last paragraph larger 2em bottom margin. sounded great, didn't make change last p in grouping.
note switch governing margin top margin, in case
p+pelegant control spacing betweenptags. however, have spacing @ top (of other elements h1, etc) , have overcome that. haven't studied long enough know suremargin-bottombest, it's i'm going now.
i ended finding out why last-child selector didn't work. because ps , ols , other elements siblings in body element, browser didn't know last p in section last-child.
i wrapped grouping of ps in <div> tag , last-child started working. because then, last-child operator not working body element, last child of div.
so relevant css made me happy...
p { margin: 0em 0em 1em;} // small margin between p tags p:last-child {margin-bottom: 2em;} // large margin
Comments
Post a Comment