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+p
elegant control spacing betweenp
tags. however, have spacing @ top (of other elements h1, etc) , have overcome that. haven't studied long enough know suremargin-bottom
best, 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