Padding without width

HTML & CSS
1

The code below is at http://dot.kr/x-test/style/div2.php


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div2</title>
<style type="text/css">
*{margin:0;padding:0;border-collapse:collapse}
.pdg5{padding:5px}
.wide50{width:50px}
.high10{height:10px}
.box{border:2px solid #808080;border-radius:15px;margin:auto}
</style>
</head>
<body class="pdg5">
<div class="box pdg5 wide50 alnC">top1</div>
<div class="high10"></div>
<div class="box pdg5">top2</div>
</body>
</html>

top1 has “width:50px”.
I like to remove “width:50px”.
So I made “top2” with removing “width:50px”.
But the result is that “top2” has very long useless right margin.
How can I remove the long right margin and make “top2” with “padding:5px”?

2

Hi,

If all you want is to center a block element without using width then use inline-block.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.central{text-align:center}
.central div{
	display:inline-block;
	vertical-align:middle;
	border:1px solid #000;
	border-radius:5px;
	padding:5px;
	*display:inline;/* remove if ie7 and under support not required*/
	*zoom:1.0;/* remove if ie7 and under support not required*/	
}
</style>
</head>

<body>
<div class="central">
<div>Centred</div>
</div>
</body>
</html>

Don’t use empty elements just to make space as in your example. Use margins instead. Also be careful with using too many presentational classes or you may end up with mark up equivalent to the spaghetti font tags of old.:slight_smile: