Usunięcie nowej linii po tagach <h1>?

94

Mam problem z usuwaniem podziałów wierszy po <h1>tagu, ponieważ za każdym razem, gdy się drukuje, dodaje on znak łamania linii bezpośrednio po nim, więc coś w rodzaju <h1>Hello World!</h1> <h2>Hello Again World!</h2>wydruków wygląda tak:

Hello World!

Hello Again World!

Nie jestem pewien, jakie tagi muszę zmienić w CSS, ale spodziewam się, że ma to coś wspólnego z dopełnieniem lub marginesami

Chcę też, jeśli to możliwe, zachować pionowe wypełnienie.

— Jack Wilsdon
źródło

155

Wygląda na to, że chcesz je sformatować jako wbudowane. Domyślnie h1i h2są elementami blokowymi, które obejmują całą szerokość linii. Możesz je zmienić tak, aby były wbudowane w css w ten sposób:

h1, h2 {
    display: inline;
}

Oto artykuł wyjaśniający różnicę między blocki inlinebardziej szczegółowo: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Aby zachować pionowe dopełnienie, użyj w inline-blockten sposób:

h1, h2 {
    display: inline-block;
}

— Ben Lee
źródło

9

<h1>tagi zostały {display: block}ustawione. Są to elementy blokowe. Aby to wyłączyć:

{display: inline}

— tkone
źródło

domyślnie tagi h używają marginesów i dopełnienia, więc musimy je usunąć

— Adeel Mughal,

Chcę również zachować dopełnienie pionowe, jeśli to w ogóle możliwe, próbowałem display: inline;, ale nie ma już dopełnienia pionowego.

— Jack Wilsdon,

1

usunięcie dopełnienia i marginesu nie usuwa nowej linii. nowa linia jest spowodowana tym, że są elementami blokowymi, co oznacza, że zajmują całą poziomą przestrzeń, w której się pojawiają (domyślnie). Tak więc, chyba że wykonasz ruchy zmiennoprzecinkowe, zmienisz wyświetlanie lub inne właściwości, ZAWSZE będziesz mieć znak nowej linii po h*znaczniku.

— tkone

@JackWilsdon Ben Lee został już zaktualizowany, aby pokazać, jak łatwo utrzymać dopełnienie pionowe, więc nie będę się też przejmować mną po twojej edycji.

— tkone

3

Właśnie rozwiązałem ten problem, ustawiając wartość marginesu h1 na minus w sekcji stylu html. Działa idealnie na moje potrzeby.

<style>
h1 { 
    display: block;
    font-size: 0.9em;
    margin-top: -1.91em;
    margin-bottom: -1.91em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
</style>
<h1 style="text-align:center"> Headline </h1>

— Jacek
źródło

2

Działa to w przypadku usuwania pionowego dopełnienia zamiast podziału wiersza.

— czerwiec

Wyszukałem w Google niewłaściwą rzecz, podczas gdy zauważyłem, że ta odpowiedź jest właściwie tym, czego szukałem. Świetne rozwiązanie, choć nie odpowiedź na pytanie. W każdym razie dzięki! :)

— Semmel

-5

<style>
h1 {
    padding: 0px;
    margin: 0px;
}
</style>

— Hamida Almangush
źródło