Using CSS, how can I control the line-height for master headline?


Tags: html,css

Problem :

How can I control the size of the spacing between my h1 and h2 without using 'line-height' in CSS? It needs to be applied to my H1 master that will be used across the entire website, so for example, if a page has a h1 that runs over 2 or 3 lines, I can't have the line-height set to 0px because it won't flow over numerous lines.

My current CSS is:

h1 { /** Headlines **/
font-family: 'Droid Serif', serif;
font-weight: 500;
font-size: 100px;
}

h2 { /** Standfirst **/
-webkit-font-smoothing: antialiased !important;
font-family: 'Source Sans Pro', sans-serif;
font-size: 30px;
font-weight: 600;
}

I need to reduce the space between H1 and H2 because the current gap is massive and unsightly. Thanks

----EDIT!---- Maybe I wasn't clear enough. Please see this Fiddle - The first example shows the leading that I want from H1.

https://jsfiddle.net/Lwfbbs1u/

On the short headline version, it looks exactly how I want it.

On the second version, that format is destroyed because the line-height is set to '0'.

The goal is to be able to have that nice, tight spacing from the first example on the second example as well, thanks for any help.



Solution :

use negative margin property

 h1 { margin-bottom :-100px}

edit :

this will probably solve your problem , but the best solution would be analyzing why you have the spacing to begin with, and avoid this to happen (or reduce it to your taste)


    CSS Howto..

    Understanding how menus work in html5 and css3

    CSS How to align two DIVs on the same line without using floats

    how to make css contents like boxes, text as center?

    CSS - How to select nth-child of form element?

    How to shrink wrap floating content?

    How can I indent all text in a paragraph except the first line?

    How to select div with id nested in another div with class in css

    How to iterate over node var in Primefaces tree to set icons in CSS class from DB

    How read(get) css style value of a server-side div in code behind(not set)?

    How do I add a horizontal scrollbar to a table in a div?

    How to center absolute position element in my case

    Button Built in CSS showing different font color in FF and Webkit

    How to make the newly appended html code keep the original css style?

    How to align both these elements in same line?

    How can I use a CSS3 transform on an element without stretching the text inside it?

    Right side border gradient only with the newer webkit gradient syntax, also which browsers support this, and how to do it in those as well?

    jQuery date picker show half day blocked

    How can I make a background image of a site start off fitting to screen and then zoomable?

    How can I use jQuery to add a fade in hover effect to my nav items?

    CSS/CSS3 - How to make background-color in table row without spaces between table-cells?

    How to keep the entire website aligned to the top when zooming-out using CSS (Firefox)?

    how to change size of the element using css?

    how to code a stickyfooter in css?

    How to bind Menus and submenus apply css using Jquery?

    How can I position two divs on the same line and have them act responsive?

    How can I use symbol fonts like marvosym in the browser?

    How do you skew a div and keep the background image unskewed

    HTML: How to style each table cell in a column via CSS?

    how to keep conditional CSS statements for internet explorer in Express (Node.js) template

    How to add multiple CSS elements to a div using jQuery?