How do you add margin to a table-cell? Is there a workaround or something?

Get Started
1

I’ve been reading that it’s not possible to do.

.info {
  display: table-cell;
  white-space: nowrap;
  margin-top: 30px;
}


<div class="info">

  <input id="input" type="text" name="someNameHere" placeholder="someValueHere">
  <input id="sent" type="submit" value="Set">
</div>

I came up with this as a solution:

CSS:

.table {
  display: table;
  margin-top: 30px;
}

.info {
  display: table-cell;
  white-space: nowrap;
}

html:

<div class="table">
  <div class="info">

    <input id="input" type="text" name="someNameHere" placeholder="someValueHere">
    <input id="sent" type="submit" value="Set">
  </div>
</div>
2
3

How can a cell in a table have a margin? Think about it.

A table is a spreadsheet of rows and columns so how can one cell have a margin? It would no longer be rows and columns. Margin does not apply to cells and is not needed ever.

The margin on the cell has no effect so why use it?

Just use flex code I gave you before and the inputs will line up nicely (answer to question in one of your multiple threads on the same subject) and the whitespace will disappear and the code is less.

<div class="table">
    <input id="input" type="text" name="someNameHere" placeholder="someValueHere">
    <input id="sent" type="submit" value="Set">
</div>

.table {/* badly named*/
  display: flex;
  margin-top: 30px;
}
input::placeholder {
  color: red;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
}
1 Like
4

But now they are together, when I wanted them separated.

Like this:
http://www.sitepoint.com/community/uploads/short-url/1Rph8Ck6xe8KiGe5TK5yyLTG0Aa.png

Not together like this:
http://www.sitepoint.com/community/uploads/short-url/kiZtONjVeJaFExBjUHIQvG9anco.png

5

I gave you the answer to that the first time you asked in your other thread.

Just add the exact margin you want and don’t leave it to a white-space guess that varies between browsers.

input[type=submit] {margin-left:2px} /* or whatever you want*/

1 Like
6

ok, now I know how to use flex.

7

This doesn’t happen with display table, or table cell.

image

table-cell; / table

image


.table {
  display: table;
  margin-top: 30px;
  background: red;
}

.info {
  display: table-cell;
  white-space: nowrap;
  background: red;
}

adding width fixes that:
https://jsfiddle.net/gbe5w1h8/37/

.flex {
  display: flex;
  margin-top: 30px;
  background:red;
  width:254px;
}
8

Why should it?

When you apply display:flex to a parent then it immediately makes all direct children ‘flex-items’ and as flex-items they have specific block behaviours and white-space nodes are ignored (among its other behaviours).

Display table and table-cell do not change the behaviour of its direct descendants (although there may be some differences).

9

Isn’t this considered overflow though?

How would you remove that?

.flex {
  display: flex;
  margin-top: 30px;
  background:red;
}

10

You lost me?

I’ve no idea what you mean.

If you are talking about the red background then that’s a red background on the parent.

I you wanted the red background as shrink-to-fit then you would use display:inline-flx on the parent.

You can’t keep pulling code out of one demo and then creating a completely different scenario and then expect it to behave the same. The original code was perfect for the original demo.

2 Likes
11

This produces a margin top of 38px, when it’s specified as 30px:

.flex {
  display:inline-flex;
  margin-top: 30px;
  background:red;
}
12

No it produces a margin-top of 30px

the body has a default margin of 8px which doesn’t collapse with the inline flexbox. 30 + 8 = 38

13

These are 2 different margins when both are specified at 30 px.

display:inline-flex; Adds additional margin.

30px

.flex {
  display: flex;
  margin-top: 30px;
}



38px

.flex {
  display:inline-flex;
  margin-top: 30px;
}

https://i.imgur.com/QrQ6mqw.png

https://i.imgur.com/Qht1eVK.png

14

Yes I mentioned the different behaviours between different display types. Some will collapse margins and others won’t. Display:flex and display:inline-flex are different properties with different behaviours.

Get rid of the body margins and there will be no discrepancy.

1 Like
16

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