Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Help with h1 tag

Posted by: newbie_css104 Jan 13 2017, 08:52 PM

Hello,

I have tried all I could find on google and now posting here for help. I am using bootstrap.css with a website and then defining my own custom.css, where I am trying the following definition of h1 (to override the original in bootstrap.css).

h1 {
color:#ff0000;
font-weight: bold;
margin:0;
padding-top:0;
margin-top:0;
padding:0;
display:inline;
font-size:inherit;
border-style:none;
white-space: nowrap;
overflow:hidden;
}

I want to specify part of the page text as <h1> without any space before or after the tag. The above gives me no space after the tag but I can't seem to get rid of the space before the tag. The extra space (equal to 2 line breaks) appears only in case of the first <h1> tag. Subsequent <h1> tags within the same html page have no space around them, before or after. I am stumped as to why this is... Help please?

I tried defining new classes, ids, specifying !important, etc... ending up at the same place everytime: the margin/padding/space before the first <h1> tag...

Thank you,
newbie

Posted by: pandy Jan 14 2017, 03:09 AM

Can you link to the page, please?

Posted by: newbie_css104 Jan 16 2017, 03:12 PM

Pandy, due to security concerns, i can't link to the page here. Is there anything else I can provide...?

Below is the original h1 definition in Bootstrap.css, that I do not wish to modify:

h1 {
margin: .67em 0;
font-size: 2em;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
font-weight: normal;
line-height: 1;
color: #777;
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
margin-top: 20px;
margin-bottom: 10px;
}
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin-top: 10px;
margin-bottom: 10px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
font-size: 75%;
}
h1,
.h1 {
font-size: 36px;
}
h2,
.h2 {
font-size: 30px;
}
h3,
.h3 {
font-size: 24px;
}
h4,
.h4 {
font-size: 18px;
}
h5,
.h5 {
font-size: 14px;
}
h6,
.h6 {
font-size: 12px;
}
.jumbotron h1,
.jumbotron .h1 {
color: inherit;
}

Thank you,
newbie

Posted by: Darin McGrew Jan 16 2017, 03:41 PM

QUOTE

I want to specify part of the page text as <h1> without any space before or after the tag. The above gives me no space after the tag but I can't seem to get rid of the space before the tag. The extra space (equal to 2 line breaks) appears only in case of the first <h1> tag. Subsequent <h1> tags within the same html page have no space around them, before or after. I am stumped as to why this is... Help please?

Without seeing the actual page, my guess is that it isn't the margin of the H1 element at all. My guess is that it's the margin or padding of an element that contains the H1 element.

But that's just a guess, given that I can't see the actual page in question.

The following may be helpful:
https://css-tricks.com/what-you-should-know-about-collapsing-margins/

Posted by: pandy Jan 16 2017, 04:07 PM

Or the margin of an element before or after the H1.