Adding a button creates white space between div's - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
May 5, 2014 at 12:42 am #169224
aprobert
Participant
So I added a button inside a div and it created white space between its container div and the div above. There are other floated elements along with the button inside the div that do not create white space. What’s extra confusing for me, is when I add a class to the button and give it a border, the white space goes away. Thanks for any help

\\html
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”UTF-8″>
<title>Me practicing coding</title>
<link rel=”stylesheet” type=”text/css” href=”css/normalize.css”>
<link rel=”stylesheet” type=”text/css” href=”css/style.css”>
<link href=’http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700′ rel=’stylesheet’ type=’text/css’>
</head>

<body>

<object type=”image/svg+xml” data=”img/my-logo.svg” class=”logo”></object><h1 class=”logo2″>1618</h1>

<object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
About Me

<object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
Learning

<object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
Sandbox

<object type=”image/svg+xml” data=”img/about-me.svg” class=”icon-nav”></object>
Resources
```
<div>
    <div>
        &lt;h1 class="heading"&gt;About Me&lt;/h1&gt;
        <img src="img/intro-icon.png" alt="intro icon" />
    </div>
    <div>
        I am trying to learn how to code.This is my test site.  We'll see how it turns out.  Hopefully steady progess is made and it does not end with me throwing my hands up in frustration.
    </div>
</div>
<div>
    <div>
        &lt;h1 class="heading"&gt;Learning&lt;/h1&gt;
        &lt;object type="image/svg+xml" data="img/about-me.svg" class="icon"&gt;&lt;/object&gt;
    </div>
    <div>
        I am trying to learn how to code. This is my test site.  We'll see how it turns out.  Hopefully steady progess is made and it does not end with me throwing my hands up in frustration.
    </div>
    <div>
        Here's where I go through lots of trials and even more errors.  I try to test out what've been learning.  I'll try to explain all the steps I'm going through and document my numerous mistakes and hopefully solutions.
    </div>
    <a href="#">Where I Learned</a></div>
</div>
<div>
    <div>
        &lt;h1 class="heading"&gt;Testing&lt;/h1&gt;
        &lt;object type="image/svg+xml" data="img/testing.svg" class="icon"&gt;&lt;/object&gt;
    </div>
    <div>
        <p>Here's where I go through lots of trials and even more errors.  I try to test out what've been learning.  I'll try to explain all the steps I'm going through and document my numerous mistakes and hopefully solutions.
    </div>
</div>
<div></div>
<div></div>
```
</body>

</html>
\\

\\css
- {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box
  box-sizing: border-box;
  }
html, body {
height: 100%;
margin: 0;
padding: 0;
}

p, h1, h2, h3, a {
margin-top: 0;
}

div {
min-height: 10%;
}

p {
font-family: “Open Sans Condensed” , sans-serif;
font-size: 1.5em;
}

h1 {
font-family: “Open Sans Condensed” , sans-serif;
font-size: 3em;
}
img,
object {
max-width: 100%;
}
a {
text-decoration: none;
}

.logo {
float: left;
width: 25%;
margin-left: 3%;
}

.logo2 {
color: #20D368;
padding-top: 1.5%;
}

.nav-right {
float: right;
border: 2px dotted black;
width: 43%;
padding-top: 1%;
margin-top: 1%;
margin-right: 3%;
}
.nav1 {
display: inline-block;
margin-right: 5%;
}

.small {
font-size: 1.25em;
color: #474747;
display: inline-block;
vertical-align: middle;
}
.icon-nav {
width: 25px;
display: inline-block;
opacity: 0.5;
}
.nav1:hover .icon-nav {
opacity: 1;
}
.nav1:hover .small {
color: black;
}

.top {
background: #CDD5DD;
position: fixed;
width: 100%;
height: 90px;
top: 0;
}
.intro {
background: #FFC266;
margin-top: 90px;
border: 2px dotted black;
}
.learn {
background: #3366CC;
}
.layout {
background: #FF4747;
}
.resources {
background: #33D685;
}
.bottom {
background: #4E545A;
}
.heading {
display: block;
border: 1px dotted black;
margin-top: 2%;
}
.col-right , .col-left {
border: 2px dotted black;
margin-top: 5%;
min-height: 100px;
}
.col-left {
width: 43%;
float: left;
margin-left: 5%;
margin-right: 3%;
padding-bottom: 5%;
}
.icon {
width: 45%;
padding: 0;
margin: 0;
}
/#icon2 {
width: 45%;
padding: 0;
margin: 0;
}/
.col-right {
width: 43%;
float: right;
margin-right: 5%;
margin-bottom: 2%;
}
.col-right2 {
float: right;
border: 2px dotted black;
margin-top: 2%;
min-height: 100px;
width: 43%;
margin-right: 5%;
}
.blurb {
color: white;
}
.btn {
background: white;
color: #3366CC;
display: inline-block;
padding: 10px 30px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: right;
margin-right: 20%;
margin-top: 4%;
}
.btn:hover {
background: #CDD5DD;
color: #3366CC;
padding: 10px 30px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: right;
margin-right: 20%;
}
.btn-space {
border: 2px dotted black;
}

/Clearfix/
.group:after {
content: “”;
display: table;
clear: both;
}
\\
May 5, 2014 at 8:59 am #169238
James
Participant
The following code in your CSS:
```
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
    box-sizing: border-box;
}
```
… is the reason your border removes this “white space”. However, this is a good thing.

https://css-tricks.com/box-sizing/

The reason there could be white space, is because the <button> element has default margin values.

Use this:
```
button {
    margin:0;
}
```
PS, I strongly advise removing this from your CSS:
```
div  {
    min-height: 10%;
}
```
May 5, 2014 at 10:56 am #169246

aprobert
Participant

Thanks so much for the help. Yeah, I thought the “code dump” might not be the best way to show my code. I’ve just started learning and so I’ve been using Code Academy and Treehouse and on the Treehouse forums I think that’s how they want you to insert code. I’ll definitely use CodePen from now on.

I actually didn’t even know there was a button element. I just created a “button” with an a href inside a paragraph element and then added in padding. (That’s how they did it in an example on Treehouse). I assumed the top margin was the problem too so I have it set to 0 for p’s and a’s, but it didn’t work. When I moved the “button” inside a div within the container div then the white space went away.

Sorry, I know I’m not the best at explaining things. I’ll learn more and get better. Again, thanks for the help and patience.

May 5, 2014 at 12:20 pm #169256

aprobert
Participant

Ok, I’m trying CodePen now. http://cdpn.io/JxbAr

I have borders around some div’s just because I wanted to see where they were. It helps me to understand how elements are laid out better. I’ll remove the borders later.

Thanks for the help. This site is incredible. Every time I Google a question I have, this site pops up with the answer.

May 5, 2014 at 3:46 pm #169280

aprobert
Participant

When you view the website you’ll see I have a button ‘Where I Learned’ in the blue section. The blue section is the div class “learn”. Inside this div I have another div class “col-right2”. Inside this div is the button which is a paragraph with an anchor tag and the class “btn”. However, if at first I didn’t put the button inside the “col-right2” div and it forced white space between the “learn” blue div and the orangeish section above it. I don’t understand why I need to put the button inside the nested div.

Again, I’m new so I’m not so good at explaining the issues. Hope that helps and thank you very much for patiently helping.

May 5, 2014 at 11:23 pm #169292

aprobert
Participant

In CodePen I’ve setup where I’m getting the problem with the button.

http://cdpn.io/JxbAr
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘CSS’ is closed to new topics and replies.