/    Sign up×
Community /Pin to ProfileBookmark

Margin/Padding Top

How come putting a top margin or padding on “.content_top .title” doesn’t affect anything? I want the .title text to be pushed down a few pixels so it is vertically centered inside of the content_top div. Can anyone tell me why it won’t do anything? Margin/padding left and right both work, just not top.

[code=html]<html><head>
<style type=”text/css”>

* {
padding: 0;
margin: 0;
}

.content_top {
width: 800px;
height: 30px;
margin: 0 0 0 0;
background-color: #ff0000;
}

.content_top .title {
color: #000000;
margin: 0 0 0 20px;
padding: 0 0 0 0;
font-size: 18px;
font-family: sans-serif;
font-weight: bold;
}

.content_middle {
width: 800px;
text-align: justify;
background-color: #00ff00;
}

.content_middle p {
padding: 0;
color: #333333;
margin: 0 12px 0 12px;
font-size: 12px;
font-family: sans-serif;
text-indent: 15px;
}

.content_bottom {
width: 800px;
height: 18px;
margin: 0 0 0 0;
background-color: #0000ff;
padding: 0;
}
</style>
</head>
<body>

<div class=”content_top”><span class=”title”>Post Title</span></div>
<div class=”content_middle”>
<p>This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. This sgsudg hsghu suhgasu ashg sghuhgaa fghdmn vb zbv sgug zjvgz zsuegr zn nf. </p>
</div><div class=”content_bottom”></div>

</body>
</html>[/code]

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@th1666authorMay 06.2009 — So from what I understand they just made them for the ease of the lazy coders who don't understand "margin: 1px 0;" would affect both top and bottom?
Copy linkTweet thisAlerts:
@FangMay 07.2009 — It is useful with lists, but it does cause problems if you are unaware of the collapsing issue.

http://complexspiral.com/publications/uncollapsing-margins/
×

Success!

Help @th1666 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...