How to do equality space between the top and the bottom

Question

There is a top (Logo, Menu, etc), then content and then something in the bottom. How can I do that the space between the content to the top and the space between the content to the bottom, will be the same?

Thanks!

Thats long code... but I'll going to do divs. I mean:
,
@Mi-Creativity — Roy, Dec 14 '15 at 16:19
CSS padding / margin ? Show us your code and where are you failing. Also you could try to reproduce your problem in a JSFiddle. — pablito.aven, Dec 14 '15 at 16:19
Thats long code... but I'll going to do divs. I mean:
,
@pablito.aven — Roy, Dec 14 '15 at 16:21
Possible duplicate of [Spacing between elements](http://stackoverflow.com/questions/9114664/spacing-between-elements) — SidOfc, Dec 14 '15 at 16:27

score 2 · Answer 1 · edited May 23 '17 at 12:24

You're looking for the CSS margin property to space contents from each other.

Padding does the same but within the element and not around the element.

What you'll want (based on your html from the comments)

#content {
    margin: 20px 0;
}

if the content also has to be centered while having this space you can change the 0 to auto like this:

#content {
    margin: 20px auto;
}

This was not that hard, googling for about 1.4 seconds gave me a good result when looking for 'space between elements'.

Here @ SO we answer every question with love except those that show no research or effort, seemingly you have put in effort provided your content but there is already something on stackoverflow about it (so you're asking the same question - before posting - check internet <3)

But I dont know how much px I should do to make the text in the middle... — Roy, Dec 14 '15 at 16:46

Andrew Bone · Answer 2 · 2015-12-14T16:29:56.303

1

Probably want something like this, but without some reference code it's hard to help.

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

edited Dec 14 '15 at 16:29

answered Dec 14 '15 at 16:21

Andrew Bone

7,092
2
18
33

Thanks, ill check it and then update you – Roy Dec 14 '15 at 16:21
With position: relative it doesnt work. I tried absolute and its really make them to be in the middle, but now they are in the left side (and I want them to be in the center). What can I do? – Roy Dec 14 '15 at 16:28
Yeah I meant absolute, my bad. Any chance you can make a http://jsfiddle.net? – Andrew Bone Dec 14 '15 at 16:30
@Roy I've also edited the code so you can try that. – Andrew Bone Dec 14 '15 at 16:32
Andrew, thanks. It works in a full screen, but when I minimize my screen its just not looking good, not responsive – Roy Dec 14 '15 at 16:42
you have suggestions? – Roy Dec 14 '15 at 17:29

Mi-Creativity · Answer 3 · 2015-12-14T16:40:56.843

You can use CSS margin or padding depending on the result you want to achieve, by setting same values to top and bottom padding or margin

JS Fiddle

body {
  padding: 0;
  margin: 0;
}
#top {
  background-color: orange;
  width: 100%;
  height: 100px;
}
#content {
  width: 100%;
  background-color: #090;
  padding: 100px 0 100px 0;/* padding top, right, bottom, left values*/
}
#bottom {
  width: 100%;
  height: 100px;
  background-color: #999;
}

<div id="top">Top</div>
<div id="content">Content
  <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odio, quidem totam fugit officiis expedita atque ullam quae. Rem, quasi distinctio suscipit. Qui cupiditate dolores quod fugiat accusantium nobis esse.</div>
<div id="bottom">Bottom</div>

The padding adds its values to your div#content evenly to have same distance on top and bottom, however if you don't want to stretch the div#content and just have spaces on top and bottom of it then replace the padding CSS line with this: JS Fiddle 2

margin:100px 0 100px 0; /* margin top, right, bottom, left values*/

How to do equality space between the top and the bottom

3 Answers3