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 between p tags. however, have spacing @ top (of other elements h1, etc) , have overcome that. haven't studied long enough know sure margin-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

Popular posts from this blog

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

Nuget pack csproj using nuspec -

c# - Display ASPX Popup control in RowDeleteing Event (ASPX Gridview) -