What's causing so much space in my div containers? [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm trying to create two divs with a heading that have a grey header that only have a small amount of padding.
Here is my html
<div class="container">
<div class="row">
<div class="col-6">
<div class="small-grey-header">
<p class="center-text">User Login</p>
</div>
</div>
<div class="col-6">
<div class="small-grey-header">
<p class="center-text">Help Links</p>
</div>
</div>
</div>
</div>
And here is my css
.center-text{
text-align: center;
display: block;
}
.small-grey-header{
border-radius: 3px;
background-color: lightgray;
height: auto;
padding-top: 1px;
padding-bottom: .5px;
margin-bottom: 5px;
}
The problem is that they look way to big and I'm not sure why.
Here is what I want
And this is what im getting
Here is a the fiddle
https://jsfiddle.net/Ljsgtq0o/
I am using a grid system to set these side by side but I'm excluded it for simplicity. Even setting 1 pixel of padding on the divs is causing a huge amount of space. What am I doing wrong? Please note that I'm not concerned with the spacing between these two headings. I just want these headings to not be so large. They almost look like buttons.

Answer 1

There is a default margin-bottom: 10px on p from bootstrap. You can use another element for that text (like a div) or remove the margin from the p
And if you want them to be side-by-side, use the col-size-# class structure.
.center-text {
text-align: center;
display: block;
}
.small-grey-header {
border-radius: 3px;
background-color: lightgray;
height: auto;
padding-top: 1px;
padding-bottom: .5px;
margin-bottom: 5px;
}
.small-grey-header p {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="small-grey-header">
<p class="center-text">User Login</p>
</div>
</div>
<div class="col-xs-6">
<div class="small-grey-header">
<p class="center-text">Help Links</p>
</div>
</div>
</div>
</div>

Answer 2

Try to add max-width property to small-grey-header class. For example:
max-width:100px;
There you have shorter buttons.
If you want to have lower buttons you can simply edit height property, you don't have to use padding in this case and you can add line-height property.
https://jsfiddle.net/Ljsgtq0o/2/
height: 25px;
line-height:25px;