The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help with h1 tag
newbie_css104
post Jan 13 2017, 08:52 PM
Post #1





Group: Members
Posts: 2
Joined: 13-January 17
Member No.: 26,263



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 14 2017, 03:09 AM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



Can you link to the page, please?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
newbie_css104
post Jan 16 2017, 03:12 PM
Post #3





Group: Members
Posts: 2
Joined: 13-January 17
Member No.: 26,263



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 16 2017, 03:41 PM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,245
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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...apsing-margins/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 16 2017, 04:07 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,505
Joined: 9-August 06
Member No.: 6



Or the margin of an element before or after the H1.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th March 2017 - 07:10 AM