0

I do not want to have a space between #id and .card button. enter image description here

i want to put some texts on top of the buy without that white space.how can i do that?

css and html:

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 400px;
  margin: auto;
  text-align: center;
  font-family: arial;
  
}

.price {
  color: grey;
  font-size: 22px;

}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}
.card img {
  width: 100%;
  height: auto;
}

#id{
    background-color: black;
    color: white;
    
}
<!DOCTYPE html>
<html>
 
<body>
     
    <div class='card'>
        <h1>product</h1>
        <p class="price">$price</p>
        <p id="id">some texts.</p>
        <p><button>buy</button></p>
    </div>

</body>
</html>
erw
  • 105
  • 1
  • 6

3 Answers3

2

First of all, there is no reason to wrap the button-element inside a p-element. It is semantically incorrect.

All p-elements have, by default, the following styling:

margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;

You can remove the space by setting the margin-bottom to 0 on the#id-element:

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 400px;
  margin: auto;
  text-align: center;
  font-family: arial;
  
}

.price {
  color: grey;
  font-size: 22px;

}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}
.card img {
  width: 100%;
  height: auto;
}

#id{
    background-color: black;
    color: white;
    margin-bottom: 0;
}
<!DOCTYPE html>
<html>
 
<body>
     
    <div class='card'>
        <h1>product</h1>
        <p class="price">$price</p>
        <p id="id">some texts.</p>
        <button>buy</button>
    </div>

</body>
</html>
Sigurd Mazanti
  • 2,098
  • 1
  • 8
  • 24
1

Remove padding and margin of p like in below example using a class .no-space. This is because by default p element will have some padding and margin.

enter image description here

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 400px;
  margin: auto;
  text-align: center;
  font-family: arial;
  
}

.price {
  color: grey;
  font-size: 22px;

}

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}
.card img {
  width: 100%;
  height: auto;
}
.no-space {
 padding-bottom:0;
 margin-bottom:0;
  padding-top:0;
 margin-top:0;
}

#id{
    background-color: black;
    color: white;
    
}
<!DOCTYPE html>
<html>
 
<body>
     
    <div class='card'>
        <h1>product</h1>
        <p class="price">$price</p>
        <p class="no-space" id="id">some texts.</p>
        <p class="no-space"><button>buy</button></p>
    </div>

</body>
</html>
kiranvj
  • 32,342
  • 7
  • 71
  • 76
0

Just add margin: 0 to the style declaration of #id selector in your css file as an easy fix.

#id {
    background-color: black;
    color: white;
    margin: 0; // add this line
}

Detailed answer: If you look at the dimensions of the paragraph tag in the Developer Console, you would find that it is taking 16px margin on top and bottom.

enter image description here

By default, the left and right margins of a text element are set to 0 , but they all come with a margin-top and margin-bottom. You get the desired layout if override this default margin-top and margin-bottom to 0.

Amit
  • 1,018
  • 1
  • 8
  • 23