Why cant margins just be margins?

HTML & CSS
1

So I have the following CSS definitions:

.earnedhead,
.spenthead,
.remainhead,
.expendhead,
.costhead {
   width: 100px;
    display: inline-block;
    padding: 3px 10px;
	text-align: center;
	margin-right: 2px;
	margin-bottom: 2px;
	background-color: red;
}	
.spent,
.remain,
.earned {
    width: 100px;
	height: 28px;
    display: inline-block;
    padding: 3px 10px;
	text-align: center;
	margin-right: 2px;
	background-color: blue;
}
.spent span,
.remain span {
	margin-left: 0px;
}
.expendhead
 {
   width: 190px;
}
.costhead {
	width: 0px;
}

(background color mostly for screenshot purposes. costhead’s width was in-progress)

Coupled with the HTML:

	<div class='row'>
		<p class='headertext'>Experience</p>
		<div class='earnedhead'>Earned</div><div class='spenthead'>Spent</div><div class='remainhead'>Remaining</div><br>
		<div class='earned'><input type='number' min=0 value=0 name='earned_xp' style='width:45.5px;height:28px'></div>
		<div class='spent' ><span class='spanfield' name='spent_xp'>3</span></div>
		<div class='remain'><span class='spanfield' name='remaining_xp'>-3</span></div>
	</div>
	<div class='2colrow'>
		<div class='col'>
		<br><br>		
		<div class='expendhead'>Expenditure Name</div>
		<div class='costhead'>Cost</div>

(Style on the input comes form elsewhere in the CSS, added inline for reproduction purpose)
For the purposes of the below screenshot, ‘row’,‘headertext’,‘2colrow’, and ‘col’ have no definition.
What i end up with is…

the first row looks fine.
the blue row, all of the boxes are the same size (120x34) why do the second and third boxes magically drift down extra pixels, and then margin themselves too wide?
the second red row, again the margin between boxes has increased for no apparent reason? Chrome tells me both boxes have just a 2px right margin, and no other, but the gap between them is certainly more than that, and it wont even let me override the margin inline to go negative in the second box to move it back. To make the second row ‘look’ correct, I have to give an inline margin-right to the first box of -2px…what??

(PS: “Use a table” is not a valid answer to this thread.)

2

Just hazarding a guess and because the divs all have a specific length, was floating the boxes tried?

Edited over enthusiastic spell checker :slight_smile:

3

Hi,
Your dealing with inline-blocks so you will have whitespace nodes to contend with.

In your first row you have tag chained the divs in the html which kills the whitespace nodes. Those are getting margins only.

  <div class='row'>
    <p class='headertext'>Experience</p>
    <div class='earnedhead'>Earned</div><div class='spenthead'>Spent</div><div class='remainhead'>Remaining</div>

Then the others start on new lines in the html which does create whitespace nodes, So you get text node + margins.

    <div class='earned'><input type='number' min=0 value=0 name='earned_xp' style='width:45.5px;height:28px'></div>
    <div class='spent' ><span class='spanfield' name='spent_xp'>3</span></div>
    <div class='remain'><span class='spanfield' name='remaining_xp'>-3</span></div>

The way to get everyone on an even keel and keeep your html clean is to keep each div/element on a new line like so.

  <div class='row'>
    <p class='headertext'>Experience</p>
    <div class='earnedhead'>Earned</div>
    <div class='spenthead'>Spent</div>
    <div class='remainhead'>Remaining</div>
    <br>
    <div class='earned'><input type='number' min=0 value=0 name='earned_xp' style='width:45.5px;height:28px'></div>
    <div class='spent' ><span class='spanfield' name='spent_xp'>3</span></div>
    <div class='remain'><span class='spanfield' name='remaining_xp'>-3</span></div>
  </div>

Then you can use vertical-align to line them up


.spent,
.remain,
.earned {
  width: 100px;
  height: 28px;
  display: inline-block;
  padding: 3px 10px;
  text-align: center;
  margin-right: 2px;
  background-color: blue;
  vertical-align: top;
}

There are other ways of doing that so you don’t have the nodes to contend with.

display:table or display:flex will line them in rows without text nodes while using html elements on new lines.

Here’s your page lining up with display: inline-block

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.earnedhead,
.spenthead,
.remainhead,
.expendhead,
.costhead {
  width: 100px;
  display: inline-block;
  padding: 3px 10px;
  text-align: center;
  margin-right: 2px;
  margin-bottom: 2px;
  background-color: red;
}
.spent,
.remain,
.earned {
  width: 100px;
  height: 28px;
  display: inline-block;
  padding: 3px 10px;
  text-align: center;
  margin-right: 2px;
  background-color: blue;
  vertical-align: top;
}
.spent span,
.remain span {
  margin-left: 0px;
}
.expendhead {
  width: 190px;
}
.costhead {
  width: 0px;
}
.row {
  margin-bottom: 2em;
  padding: 1px 0;  /*uncollapse <p> margins*/
}
</style>

</head>
<body>

  <div class="row">
    <p class="headertext">Experience</p>
    <div class="earnedhead">Earned</div>
    <div class="spenthead">Spent</div>
    <div class="remainhead">Remaining</div>
    <br>
    <div class="earned"><input type="number" min=0 value=0 name="earned_xp" style="width:45.5px;height:28px"></div>
    <div class="spent" ><span class="spanfield" name="spent_xp">3</span></div>
    <div class="remain"><span class="spanfield" name="remaining_xp">-3</span></div>
  </div>

  <div class="2colrow">
    <div class="col">
      <div class="expendhead">Expenditure Name</div>
      <div class="costhead">Cost</div>
    </div>
  </div>

</body>
</html>

Just to clarify, CSS display:table is not the same as HTML Tables

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.