Menghapus baris baru setelah tag <h1>?

94

Saya mengalami masalah dengan menghapus pemisah baris setelah <h1>tag, karena setiap kali dicetak, ia menambahkan pemutusan baris langsung setelahnya, jadi sesuatu seperti <h1>Hello World!</h1> <h2>Hello Again World!</h2>mencetak seperti ini:

Hello World!

Hello Again World!

Saya tidak yakin dengan tag apa yang perlu saya ubah di CSS, tapi saya berharap itu ada hubungannya dengan padding atau margin

Saya juga ingin mempertahankan bantalan vertikal jika memungkinkan.

html css header styles stylesheet Jack Wilsdon
sumber

Jawaban:

155

Sepertinya Anda ingin memformatnya sebagai sebaris. Secara default, h1dan h2merupakan elemen level blok yang menjangkau seluruh lebar garis. Anda dapat mengubahnya menjadi sejajar dengan css seperti ini:

h1, h2 {
    display: inline;
}

Berikut adalah artikel yang menjelaskan perbedaan antara blockdan inlinelebih detail: http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

Untuk mempertahankan bantalan vertikal, gunakan inline-block, seperti ini:

h1, h2 {
    display: inline-block;
}
Ben Lee
sumber
9

<h1>tag telah {display: block}disetel. Mereka adalah elemen level blok. Untuk mematikan ini:

{display: inline}
tkone
sumber
secara default tag h menggunakan margin, padding jadi kami harus menghapus ini
Adeel Mughal
Saya juga ingin mempertahankan padding vertikal jika memungkinkan, saya telah mencoba display: inline ;, tetapi padding vertikal tidak lagi.
Jack Wilsdon
1
menghapus padding dan margin tidak menghapus baris baru. baris baru ini disebabkan karena mereka adalah elemen level blok, yang berarti mereka mengambil semua ruang horizontal di mana mereka muncul (secara default). Jadi, kecuali jika Anda mengapung, mengubah tampilan, atau beberapa properti lainnya, Anda SELALU memiliki baris baru setelah h*tag.
tkone
@JackWilsdon Ben Lee telah memperbarui untuk menunjukkan cara mempertahankan bantalan vertikal dengan mudah, jadi saya tidak akan repot-repot dengan saya juga setelah Anda mengedit.
tkone
3

Saya baru saja memecahkan masalah ini dengan mengatur nilai margin h1 menjadi minus di bagian gaya html. Ini bekerja dengan sempurna untuk kebutuhan saya.

<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
sumber
2
Ini berfungsi untuk menghilangkan padding vertikal, bukan jeda baris.
juil
Saya mencari hal yang salah di Google sementara saya perhatikan bahwa jawaban ini sebenarnya yang saya cari. Solusi hebat, meski bukan jawaban atas pertanyaan itu. Terima kasih! :)
Semmel
-5 

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