Help with h1 tag Options

[newbie_css104]

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

[pandy]

Can you link to the page, please?

[newbie_css104]

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

[Darin McGrew]

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...apsing-margins/

[pandy]

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