Removing gap without affecting styling

Question

so in a previous post I asked how to remove a gap so that the body takes up the entire height of the browser window. This was solved using:

margin: 0;

However, I need (or the only way I know to) style my text using margins. As soon as I apply something like

margin-top: 50px;

the body doesn't fit the 100% height of the browser. I know all of the contents of the div have to use margin 0 in order for it work, but how am I supposed to style things using a margin.

Are there any other ways I can make the body 100% of the browser height?

https://jsfiddle.net/fveb8wsu/

remove the margin and add `padding-top: 50px` to `#content-mid` instead? — StudioTime, Feb 22 '16 at 14:46
you're applying margins to entire divs. you should think about putting your text inside a
element, and adding your text styling to those. — Cruiser, Feb 22 '16 at 14:48
Alternatively, add `display: inline-block;` to `#content-mid` — StudioTime, Feb 22 '16 at 14:49
for text you can use combination of text-indent and padding. Read http://stackoverflow.com/questions/5958699/difference-between-margin-and-padding for more. — Taran J, Feb 22 '16 at 14:49

score 0 · Answer 1 · answered Feb 22 '16 at 14:51

0

body{
  margin:0;
  padding:0;
}

Did the trick for me, the body has some default paddings. So since the content of the mid was 100vh + padding this would be greater than 100vh

answered Feb 22 '16 at 14:51

Alexei Darmin

2,079
1
18
30

score 0 · Answer 2 · answered Feb 22 '16 at 14:51

Is that what you need ? DEMO

#content-mid {
  background-color: #000000;
  opacity: 0.9;
  height: 100vh;
  width: 750px;
  margin-left: 200px;
}
#basics {
  display: table;
  margin: 0 auto;
  height: 400px;
  width: 725px;
}
/* Content Text */

#sv_title {
  font-family: BebasNeue;
  font-size: 60px;
  color: #FFFFFF;
  text-align: center;
  margin-top: 50px;
}
#sv_sub {
  font-family: 'Quicksand', sans-serif;
  font-size: 25px;
  color: #FFFFFF;
  text-align: center;
  margin: 0;
  margin-top: -20px;
}

<div id="content-mid">

  <div id="basics">
    <div id="sv_title">Community Name</div>
    <div id="sv_sub">Your sub title here!</div>
  </div>

</div>

score 0 · Answer 3 · answered Feb 22 '16 at 15:05

i agree with everyone, instead of margin use padding, take a look:

#content-mid {
background-color: #000000;
opacity: 0.9;
height:100vh;
width: 100%;
padding-left: 200px;
}
#basics { 
display: table;
margin: 0 auto;
height: 400px;
width:100%;
padding-top: 50px;}

https://jsfiddle.net/keinchy/5up22vom/1/

-cheers

Nenad Vracar · Answer 4 · 2016-02-22T15:16:43.213

What you have here is collapsing margins between parent and child element because parent has no margin-top and child has margin-top: 50px Demo

So now parent element has height: 100vh and margin-top: 50px and that is why body doesn't fit the 100% height of the browser.

There are couple options how you could prevent collapsing margins

Use display: inline-block Demo
Use display: flex Demo
Use float: left Demo

Or if you want to keep margin on parent but you don't want height to be more then window height you could use calc(100vh - marginofchildren) like this Demo

Removing gap without affecting styling

4 Answers4