Line height href css

CSS line-height Property

The line-height property defines the line-height. There are three situations:

• On block level elements, the line-height property specifies the minimal line-height of line boxes in the element.
• On non-replaced inline elements, the line-height property specifies the height which is used in the calculation of the line box height.
• On replaced inline elements just like buttons or other input elements, the line-height property does not affect.

The line-height property sets the leading of lines of a text. If the line-height value is greater than the font-size value of an element, the difference will be the leading of text.

The line-height property has no effect when applying to inline elements: such as images, buttons, etc.

Initial Value	normal
Applies to	List items.
Inherited	Yes.
Animatable	Yes. Height of the lines is animatable.
Version	CSS1
DOM Syntax	object.style.lineHeight = «40px»;

Syntax

line-height: normal | number | length | initial | inherit;

Example of the line-height property:

html> html> head> title>Title of the document title> style> div < line-height: normal; > style> head> body> h2>Line-height property example h2> h3>line-height: normal (default) h3> div>This is a paragraph with a standard line-height. br> The standard line height in most browsers is about 110% to 120%. div> body> html>

Result

Example of the line-height property with the «length» value:

html> html> head> title>Title of the document title> style> div < line-height: 10px; > style> head> body> h2>Line-height property example h2> h3>line-height: 10px h3> div>This is a paragraph with a specified line-height. br> The line height here is set to 10 pixels. div> body> html>

Example of the line-height property with the «percentage» value:

html> html> head> title>Title of the document title> style> div < line-height: 200%; > style> head> body> h2>Line-height property example h2> h2>line-height: 200% h2> div>This is a paragraph with a bigger line-height. br> The line height here is set to 200%. div> body> html>

Example of the line-height property with all the values:

html> html> head> title>Title of the document title> style> div.a < line-height: 1; > div.b < line-height: 50px; > div.c < line-height: 0.5cm; > div.d < line-height: 1cm; > div.e < line-height: 200%; > div.f < line-height: normal; > style> head> body> h2>Line-height property example h2> h3>line-height: 1 h3> div class="a">This is a paragraph with a specified line-height. br> The line height here is set to 1. div> h3>line-height: 50px h3> div class="b">This is a paragraph with a specified line-height. br> The line height here is set to 50 pixels. div> h3>line-height: 0.5cm h3> div class="c">This is a paragraph with a specified line-height. br> The line height here is set to 0.5 centimeter. div> h3>line-height: 1cm h3> div class="d">This is a paragraph with a specified line-height. br> The line height here is set to 1 centimeter. div> h3>line-height: 200% h3> div class="e">This is a paragraph with a bigger line-height. br> The line height here is set to 200%. div> h3>line-height: normal h3> div class="f">This is a paragraph with a standard line-height. br> The standard line height in most browsers is about 110% to 120%. div> body> html>

Line-height property for different purposes

The line-height property can be used for creating different interesting styles. For example, you can use the line-height property to give each line of the text a different color. Here you may use a linear-gradient () with color-stops. Or you can use this property for putting lines between texts with the help of repeating-linear-gradient().

Values

Value	Description	Play it
normal	Defines a normal line height. It is the default value of this property.	Play it »
length	Defines a fixed line height in px, cm etc.	Play it »
number	Defines a number which is multiplied with the current font size to set the line height.	Play it »
%	Defines a line height in percent of current font size.	Play it »
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.

Browser support

Источник

Почему свойство line-height не работает с гиперссылками?

Это html-код для гиперссылок. Я хотел иметь небольшой разрыв между текстами. Например, между «Меню» и «Свяжитесь с нами». Спасибо заранее.

 
Menu
 Contact Us
 About Us
 Terms & Conditions
 Jobs
 Your Order 
 

передайте css div#navbar a это решит вашу проблему

4 ответа

вы должны определить высоту строки в привязке, а не в навигация id, см. пример кода: —

 Menu
 Contact Us
 About Us
 Terms & Conditions
 Jobs
 Your Order 

И другой правильный метод, о котором я упоминаю ниже, вы должны сделать навигацию в соответствующих элементах списка ul li, как указано ниже: —

#navbar li < display:block; list-style-type:none; line-height:25px; >#navbar li a < text-decoration:none; color:red; >#navbar li a.fb < text-decoration:none; color:green; >#navbar li a:hover

@TheKraven Нет, целью другого метода является правильная разметка для навигации всякий раз, когда нам нужна навигация, поэтому мы должны сделать правильный макияж с помощью HTML и CSS, чтобы не избегать HTML. Вот и я дал вам два ответа, один был основан на ваш вопрос, а второй я сделал со своей стороны, как надо .

Не используйте
(с которым вы не уверены) и line-height , используйте список и отрегулируйте поля в элементах списка.

Демо: http://jsfiddle.net/psP7L/

Собственная семантическая разметка сначала; затем получите стиль.

Однако, чтобы ответить на ваш вопрос, он «работает», просто что line-height на display:inline элементы ведут себя по-разному в спецификации, чем для display:block .

Источник

CSS line-height Property

The line-height property specifies the height of a line.

Note: Negative values are not allowed.

Default value:	normal
Inherited:	yes
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.lineHeight=»30px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
normal	A normal line height. This is default	Demo ❯
number	A number that will be multiplied with the current font-size to set the line height	Demo ❯
length	A fixed line height in px, pt, cm, etc.	Demo ❯
%	A line height in percent of the current font size	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the line height in pixels and centimeters for different elements:

Example

Set the line height as a number for different elements:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник