h6 element takes more space than it should [duplicate]

-1

This question already has an answer here:

• 
  What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
  
  4 answers
  
  

I have just a simple h6 tag and it just takes a lot of space for no reason. This is the code I have:

HTML:

<div class="logintitle">

  <h6>LOGIN</h6>

</div>

First attempt in CSS

.logintitle {

top: 0;

bottom: 0;

border: 1px solid black; /* showing unwanted margin top and bottom */

}

The following gives me the below result:

html css

share|improve this question

edited Nov 20 '18 at 20:49

crodev

asked Nov 20 '18 at 20:19

crodevcrodev

9212

marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 21:28

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you can change style of h6 using CSS
  
  – Kamil Kiełczewski
  Nov 20 '18 at 20:21
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What's the line-height? Does it have margin or padding?
  
  – disinfor
  Nov 20 '18 at 20:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i tried to set margin and padding to 0 as well but it does nothing, I didnt set line height
  
  – crodev
  Nov 20 '18 at 20:22
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Open the dev tools of you browser. And show please the CSS applied to h6 element. Some styles can be inherited or applied.
  
  – Fox
  Nov 20 '18 at 20:22
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @crodev well, now you need only to override those styles for h6 element.
  
  – Fox
  Nov 20 '18 at 20:27
  

  
  
  
  

 | 
show 5 more comments

-1

This question already has an answer here:

• 
  What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
  
  4 answers
  
  

I have just a simple h6 tag and it just takes a lot of space for no reason. This is the code I have:

HTML:

<div class="logintitle">

  <h6>LOGIN</h6>

</div>

First attempt in CSS

.logintitle {

top: 0;

bottom: 0;

border: 1px solid black; /* showing unwanted margin top and bottom */

}

The following gives me the below result:

html css

share|improve this question

edited Nov 20 '18 at 20:49

crodev

asked Nov 20 '18 at 20:19

crodevcrodev

9212

marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 21:28

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you can change style of h6 using CSS
  
  – Kamil Kiełczewski
  Nov 20 '18 at 20:21
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What's the line-height? Does it have margin or padding?
  
  – disinfor
  Nov 20 '18 at 20:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i tried to set margin and padding to 0 as well but it does nothing, I didnt set line height
  
  – crodev
  Nov 20 '18 at 20:22
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Open the dev tools of you browser. And show please the CSS applied to h6 element. Some styles can be inherited or applied.
  
  – Fox
  Nov 20 '18 at 20:22
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @crodev well, now you need only to override those styles for h6 element.
  
  – Fox
  Nov 20 '18 at 20:27
  

  
  
  
  

 | 
show 5 more comments

-1

-1

-1

This question already has an answer here:

• 
  What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
  
  4 answers
  
  

I have just a simple h6 tag and it just takes a lot of space for no reason. This is the code I have:

HTML:

<div class="logintitle">

  <h6>LOGIN</h6>

</div>

First attempt in CSS

.logintitle {

top: 0;

bottom: 0;

border: 1px solid black; /* showing unwanted margin top and bottom */

}

The following gives me the below result:

html css

share|improve this question

edited Nov 20 '18 at 20:49

crodev

asked Nov 20 '18 at 20:19

crodevcrodev

9212

This question already has an answer here:

• 
  What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
  
  4 answers
  
  

I have just a simple h6 tag and it just takes a lot of space for no reason. This is the code I have:

HTML:

<div class="logintitle">

  <h6>LOGIN</h6>

</div>

First attempt in CSS

.logintitle {

top: 0;

bottom: 0;

border: 1px solid black; /* showing unwanted margin top and bottom */

}

The following gives me the below result:

This question already has an answer here:

• 
  What are the default margins for the html heading tags (<h1>, <h2>, <h3>, etc.)?
  
  4 answers
  
  

html css

html css

share|improve this question

edited Nov 20 '18 at 20:49

crodev

asked Nov 20 '18 at 20:19

crodevcrodev

9212

share|improve this question

edited Nov 20 '18 at 20:49

crodev

asked Nov 20 '18 at 20:19

crodevcrodev

9212

share|improve this question

share|improve this question

edited Nov 20 '18 at 20:49

crodev

edited Nov 20 '18 at 20:49

crodev

edited Nov 20 '18 at 20:49

crodev

asked Nov 20 '18 at 20:19

crodevcrodev

9212

asked Nov 20 '18 at 20:19

crodevcrodev

9212

asked Nov 20 '18 at 20:19

crodevcrodev

9212

9212

marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 21:28

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 20 '18 at 21:28

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you can change style of h6 using CSS
  
  – Kamil Kiełczewski
  Nov 20 '18 at 20:21
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What's the line-height? Does it have margin or padding?
  
  – disinfor
  Nov 20 '18 at 20:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i tried to set margin and padding to 0 as well but it does nothing, I didnt set line height
  
  – crodev
  Nov 20 '18 at 20:22
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Open the dev tools of you browser. And show please the CSS applied to h6 element. Some styles can be inherited or applied.
  
  – Fox
  Nov 20 '18 at 20:22
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @crodev well, now you need only to override those styles for h6 element.
  
  – Fox
  Nov 20 '18 at 20:27
  

  
  
  
  

 | 
show 5 more comments

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  you can change style of h6 using CSS
  
  – Kamil Kiełczewski
  Nov 20 '18 at 20:21
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What's the line-height? Does it have margin or padding?
  
  – disinfor
  Nov 20 '18 at 20:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i tried to set margin and padding to 0 as well but it does nothing, I didnt set line height
  
  – crodev
  Nov 20 '18 at 20:22
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Open the dev tools of you browser. And show please the CSS applied to h6 element. Some styles can be inherited or applied.
  
  – Fox
  Nov 20 '18 at 20:22
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @crodev well, now you need only to override those styles for h6 element.
  
  – Fox
  Nov 20 '18 at 20:27
  

  
  
  
  

you can change style of h6 using CSS

– Kamil Kiełczewski
Nov 20 '18 at 20:21

you can change style of h6 using CSS

– Kamil Kiełczewski
Nov 20 '18 at 20:21

What's the line-height? Does it have margin or padding?

– disinfor
Nov 20 '18 at 20:22

What's the line-height? Does it have margin or padding?

– disinfor
Nov 20 '18 at 20:22

i tried to set margin and padding to 0 as well but it does nothing, I didnt set line height

– crodev
Nov 20 '18 at 20:22

i tried to set margin and padding to 0 as well but it does nothing, I didnt set line height

– crodev
Nov 20 '18 at 20:22

2

2

Open the dev tools of you browser. And show please the CSS applied to h6 element. Some styles can be inherited or applied.

– Fox
Nov 20 '18 at 20:22

Open the dev tools of you browser. And show please the CSS applied to h6 element. Some styles can be inherited or applied.

– Fox
Nov 20 '18 at 20:22

1

1

@crodev well, now you need only to override those styles for h6 element.

– Fox
Nov 20 '18 at 20:27

@crodev well, now you need only to override those styles for h6 element.

– Fox
Nov 20 '18 at 20:27

 | 
show 5 more comments

3 Answers
3

active

oldest

votes

3

All heading tags (like your <h6>) by default have some amount of top and bottom margin to them. Additionally, if you have other styles in your project, they may be adding more.

If you do not want those margins, you can do this, which should likely fix your issue:

.logintitle h6 { margin: 0; }

share|improve this answer

answered Nov 20 '18 at 20:29

brianespinosabrianespinosa

1,573716

add a comment | 

1

I think you have an error in the class name, you have to add "h6" to the class name.

TRY:

.logintitle h6{

   margin:0;

   padding:0;

   line-height:16px;

   font-size:14px;

}

share|improve this answer

answered Nov 20 '18 at 20:37

Edwin CastañedaEdwin Castañeda

1463

add a comment | 

1

As an additional note, if you want to reset margin and padding on all the elements of your site, you can use the following CSS reset:

* {

    margin: 0;

    padding: 0;

}

Also, worthy of mention, is the box-sizing CSS property, which -in the following reset- sets all your elements' sizes to include border and padding:

* {

    box-sizing: border-box;

}

share|improve this answer

answered Nov 20 '18 at 20:47

NicheNiche

749322

add a comment | 

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

active

oldest

votes

active

oldest

votes

3

All heading tags (like your <h6>) by default have some amount of top and bottom margin to them. Additionally, if you have other styles in your project, they may be adding more.

If you do not want those margins, you can do this, which should likely fix your issue:

.logintitle h6 { margin: 0; }

share|improve this answer

answered Nov 20 '18 at 20:29

brianespinosabrianespinosa

1,573716

add a comment | 

3

All heading tags (like your <h6>) by default have some amount of top and bottom margin to them. Additionally, if you have other styles in your project, they may be adding more.

If you do not want those margins, you can do this, which should likely fix your issue:

.logintitle h6 { margin: 0; }

share|improve this answer

answered Nov 20 '18 at 20:29

brianespinosabrianespinosa

1,573716

add a comment | 

3

3

3

All heading tags (like your <h6>) by default have some amount of top and bottom margin to them. Additionally, if you have other styles in your project, they may be adding more.

If you do not want those margins, you can do this, which should likely fix your issue:

.logintitle h6 { margin: 0; }

share|improve this answer

answered Nov 20 '18 at 20:29

brianespinosabrianespinosa

1,573716

All heading tags (like your <h6>) by default have some amount of top and bottom margin to them. Additionally, if you have other styles in your project, they may be adding more.

If you do not want those margins, you can do this, which should likely fix your issue:

.logintitle h6 { margin: 0; }

share|improve this answer

answered Nov 20 '18 at 20:29

brianespinosabrianespinosa

1,573716

share|improve this answer

share|improve this answer

answered Nov 20 '18 at 20:29

brianespinosabrianespinosa

1,573716

answered Nov 20 '18 at 20:29

brianespinosabrianespinosa

1,573716

answered Nov 20 '18 at 20:29

brianespinosabrianespinosa

1,573716

1,573716

add a comment | 

add a comment | 

1

I think you have an error in the class name, you have to add "h6" to the class name.

TRY:

.logintitle h6{

   margin:0;

   padding:0;

   line-height:16px;

   font-size:14px;

}

share|improve this answer

answered Nov 20 '18 at 20:37

Edwin CastañedaEdwin Castañeda

1463

add a comment | 

1

I think you have an error in the class name, you have to add "h6" to the class name.

TRY:

.logintitle h6{

   margin:0;

   padding:0;

   line-height:16px;

   font-size:14px;

}

share|improve this answer

answered Nov 20 '18 at 20:37

Edwin CastañedaEdwin Castañeda

1463

add a comment | 

1

1

1

I think you have an error in the class name, you have to add "h6" to the class name.

TRY:

.logintitle h6{

   margin:0;

   padding:0;

   line-height:16px;

   font-size:14px;

}

share|improve this answer

answered Nov 20 '18 at 20:37

Edwin CastañedaEdwin Castañeda

1463

I think you have an error in the class name, you have to add "h6" to the class name.

TRY:

.logintitle h6{

   margin:0;

   padding:0;

   line-height:16px;

   font-size:14px;

}

share|improve this answer

answered Nov 20 '18 at 20:37

Edwin CastañedaEdwin Castañeda

1463

share|improve this answer

share|improve this answer

answered Nov 20 '18 at 20:37

Edwin CastañedaEdwin Castañeda

1463

answered Nov 20 '18 at 20:37

Edwin CastañedaEdwin Castañeda

1463

answered Nov 20 '18 at 20:37

Edwin CastañedaEdwin Castañeda

1463

1463

add a comment | 

add a comment | 

1

As an additional note, if you want to reset margin and padding on all the elements of your site, you can use the following CSS reset:

* {

    margin: 0;

    padding: 0;

}

Also, worthy of mention, is the box-sizing CSS property, which -in the following reset- sets all your elements' sizes to include border and padding:

* {

    box-sizing: border-box;

}

share|improve this answer

answered Nov 20 '18 at 20:47

NicheNiche

749322

add a comment | 

1

As an additional note, if you want to reset margin and padding on all the elements of your site, you can use the following CSS reset:

* {

    margin: 0;

    padding: 0;

}

Also, worthy of mention, is the box-sizing CSS property, which -in the following reset- sets all your elements' sizes to include border and padding:

* {

    box-sizing: border-box;

}

share|improve this answer

answered Nov 20 '18 at 20:47

NicheNiche

749322

add a comment | 

1

1

1

As an additional note, if you want to reset margin and padding on all the elements of your site, you can use the following CSS reset:

* {

    margin: 0;

    padding: 0;

}

Also, worthy of mention, is the box-sizing CSS property, which -in the following reset- sets all your elements' sizes to include border and padding:

* {

    box-sizing: border-box;

}

share|improve this answer

answered Nov 20 '18 at 20:47

NicheNiche

749322

As an additional note, if you want to reset margin and padding on all the elements of your site, you can use the following CSS reset:

* {

    margin: 0;

    padding: 0;

}

Also, worthy of mention, is the box-sizing CSS property, which -in the following reset- sets all your elements' sizes to include border and padding:

* {

    box-sizing: border-box;

}

share|improve this answer

answered Nov 20 '18 at 20:47

NicheNiche

749322

share|improve this answer

share|improve this answer

answered Nov 20 '18 at 20:47

NicheNiche

749322

answered Nov 20 '18 at 20:47

NicheNiche

749322

answered Nov 20 '18 at 20:47

NicheNiche

749322

749322

add a comment | 

add a comment | 

This page is only for reference, If you need detailed information, please check here