Vertical margins

HTML & CSS
1

I was just curious if there was a PURE CSS way of making an element have a top or bottom margin equal to its height?

2

is the height the same on every page load or is it dynamic?

3

it is be dynamic ( based on content)

4

Short and simple answer, No. :slight_smile:

The only (PURE CSS) way you can set a dynamic vertical margin on an element is with % (or em) and even then it will not be relative to that element’s height. Those vertical margins would be based off of the parent’s width.

Take this example below (which uses a 90% width on the parent and 15% v-margins on the child) and reduce your browser window’s width and you will see how the % margins are based on the parent width.

Bottom line, % v-margins are not very useful.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Percentage Vertical Margins</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
    background:#CCC;
}
#parent {
    width:90%;
    margin:0 auto;
    background:#FFF;
    overflow:hidden;/*uncollapse child margins (#child)*/
}
#child {
    width:15em;
    margin:15% auto;
    background:lime;
    overflow:hidden;/*uncollapse child margins (p)*/
}
p {margin:.5em}
</style>

</head>
<body>

<div id="parent">
    <div id="child">
        <p>fluid height child</p>
        <p>with 15% vertical margins</p>
        <p>% v-margins are derived</p>
        <p>from parent's width</p>
        <p>reduce browser width</p>
    </div>
</div>

</body>
</html>
5

ok, since a pure css solution is not an option it can be done relatively easily with javascript though.

6

Well thats disappoint… but I wanted to make sure I wasn’t overlooking something.