Does grid, flex create automatic padding?

HTML & CSS
1

How come there is padding (whitespace) at the top and bottom of.

Grid
https://jsfiddle.net/cd6meyzt/

Flex
https://jsfiddle.net/jxyh48qs/

But not Absolute?
https://jsfiddle.net/82t6v5jm/

2

Are you talking about the padding/margin on the body element that you negate in the last example?

1 Like
3

Yes.

Is it automatic with flex and grid?

4

Problem solved then or do you still have questions?

5

So, it has to be implemented on the absolute code.
https://jsfiddle.net/2otqs5y3/

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}
6

Thé question doesn’t make sense.

The padding/ margin is from the body element. Flex or grid is irrelevant.

Absolute elements are placed where you put them and are not in the flow so if you place them using co-ordinates then padding on a parent has no effect.

2 Likes
7

oh, I see now.

Thank you for clearing that up for me.

Adding html, body. removes the padding and margin.

I don’t always add it to code unless it is something I am working on.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  width: 582px;
  overflow: hidden;
}
8

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