How do I get rid of the whitespace above my 'subscribe to our newsletter' section
up vote
1
down vote
favorite
I want to get rid of the whitespace between the 'subscribe to our newsletter' section and the 'Affordable Professional Web Design' section.
I have already tried to set the margin to 0 for the bottom of the 'Affordable Professional Web Design' section and also the top margin for the 'subscribe to our newsletter' section but that doesn't seem to work.
This is how it looks like in a browser:
This is my HTML and CSS file:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
This is how i want it to look like:
html css
add a comment |
up vote
1
down vote
favorite
I want to get rid of the whitespace between the 'subscribe to our newsletter' section and the 'Affordable Professional Web Design' section.
I have already tried to set the margin to 0 for the bottom of the 'Affordable Professional Web Design' section and also the top margin for the 'subscribe to our newsletter' section but that doesn't seem to work.
This is how it looks like in a browser:
This is my HTML and CSS file:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
This is how i want it to look like:
html css
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I want to get rid of the whitespace between the 'subscribe to our newsletter' section and the 'Affordable Professional Web Design' section.
I have already tried to set the margin to 0 for the bottom of the 'Affordable Professional Web Design' section and also the top margin for the 'subscribe to our newsletter' section but that doesn't seem to work.
This is how it looks like in a browser:
This is my HTML and CSS file:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
This is how i want it to look like:
html css
I want to get rid of the whitespace between the 'subscribe to our newsletter' section and the 'Affordable Professional Web Design' section.
I have already tried to set the margin to 0 for the bottom of the 'Affordable Professional Web Design' section and also the top margin for the 'subscribe to our newsletter' section but that doesn't seem to work.
This is how it looks like in a browser:
This is my HTML and CSS file:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
This is how i want it to look like:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
html css
html css
edited Nov 11 at 8:58
Temani Afif
60.8k93472
60.8k93472
asked Nov 11 at 8:47
Benard Manuh
565
565
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
You are facing a complex margin-collapsing
as the p
element has a default margin-bottom
that is rendred outside of the section even if this one is having a min-height
set. You may notice that this won't happen in all the browsers (on Firefox you won't see this gap).
To fix this, simply remove that margin:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
margin-bottom:0;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You are facing a complex margin-collapsing
as the p
element has a default margin-bottom
that is rendred outside of the section even if this one is having a min-height
set. You may notice that this won't happen in all the browsers (on Firefox you won't see this gap).
To fix this, simply remove that margin:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
margin-bottom:0;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
add a comment |
up vote
1
down vote
accepted
You are facing a complex margin-collapsing
as the p
element has a default margin-bottom
that is rendred outside of the section even if this one is having a min-height
set. You may notice that this won't happen in all the browsers (on Firefox you won't see this gap).
To fix this, simply remove that margin:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
margin-bottom:0;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You are facing a complex margin-collapsing
as the p
element has a default margin-bottom
that is rendred outside of the section even if this one is having a min-height
set. You may notice that this won't happen in all the browsers (on Firefox you won't see this gap).
To fix this, simply remove that margin:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
margin-bottom:0;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
You are facing a complex margin-collapsing
as the p
element has a default margin-bottom
that is rendred outside of the section even if this one is having a min-height
set. You may notice that this won't happen in all the browsers (on Firefox you won't see this gap).
To fix this, simply remove that margin:
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
margin-bottom:0;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
margin-bottom:0;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
.webdesignbannerdiv {
min-height: 400px;
background: blue;
padding-top: 20px;
text-align: center;
color: white;
margin-bottom: 0px;
}
.webdesignheader {
margin-top: 100px;
font-size: 55px;
}
.webdesignparagraph {
font-size: 20px;
margin-top: 5px;
margin-bottom:0;
}
/*newsletter section*/
.newsletterdiv {
margin-top: 0px;
padding: 15px;
color: white;
background-color: #35424a;
}
<section id="affordablewebdesignbanner">
<div class="webdesignbannerdiv">
<h1 class="webdesignheader">Affordable Professional Web Design</h1>
<p class="webdesignparagraph">Lorem ipsum dolor sit amet, consectetur </p>
</div>
</section>
<section id=subscribetonewsletter>
<div class="newsletterdiv">
<h1>Subscribe to our newsletter</h1>
<form>
<input type="email" placeholder="Enter Email...">
<button type="submit" class="newsletterbutton">Subscribe</button>
</form>
</div>
</section>
edited Nov 11 at 9:05
answered Nov 11 at 8:53
Temani Afif
60.8k93472
60.8k93472
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53247127%2fhow-do-i-get-rid-of-the-whitespace-above-my-subscribe-to-our-newsletter-sectio%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown