CSS свойство display - httpdoc.ru

CSS Display

Свойство CSS display используется для указания того, как должен отображаться элемент. С помощью этого свойства мы можем изменить поведение отображения элемента, например, установить inline или block property вручную, переопределив стиль по умолчанию.

Синтаксис:
display: значение;

Отображаемые значения CSS

  • Display: Inline
  • Display: Inline-Block
  • Display: Block
  • Display: None

Свойство display: inline

inline Значение дает элемент инлайн - свойство, даже если это блок - элемент. Встроенный элемент не приводит к разрыву строки и позволяет добавить любой другой элемент в ту же строку.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Display Inline </title> 
  <meta charset="UTF-8">
<style>
li {
  display: inline;
}
a{
  text-decoration: none;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Course</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>  
  <li><a href="#">Feedback</a></li>
</ul>

</body>
</html>

Выход

CSS Display Inline

Свойство display: inline-block

inline-block Значение вызывает элемент для создания коробки блока , который будет протекал с окружающей т.е. содержаниями в той же строке, что и соседний контент.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Display Inline Block </title> 
  <meta charset="UTF-8">
<style type="text/css">
 div {
  display: inline-block;
  background: seagreen;
  padding: 10px;
  }
 span {
  display: inline-block;        
  background: #efe7e7;
  padding: 10px;
  }
</style>
</head>

<body>
 <div>
  <span>This span element and its parent div element generate an inline-block box.</span>
 </div>
</body>
</html>

Выход

CSS Display Inline Block
Этот элемент span и его родительский элемент div создают блок встроенного блока.

Свойство display: block

Он заставляет элемент вести себя как элемент уровня блока, т.е. элемент, добавленный рядом с элементом блока, будет отображаться в следующей строке, например, элемент <div> или <p> .

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Display Block </title> 
  <meta charset="UTF-8">
<style type="text/css">
 #span {
  display: block;
  background: #F0E68C;
  padding: 10px;
  }
 #a {
  display: block;
  background: #90EE90;
  text-decoration: none;
  padding: 10px;
 }
</style>
</head>

<body>
 <p>
  <a id="a" href="https://htmldoc.com" target="_blank">Visit htmldoc.com</a> <br>
  <span id="span">This span element generates a block box.</span>
 </p>
</body>
</html>

Выход

CSS Display Block

Посетите htmldoc.ru
Этот элемент span создает блок-бокс.


Свойство display: none

Это значение скрывает элемент на веб-странице. Элемент даже не занимает места и полностью скрывается.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Display None </title> 
  <meta charset="UTF-8">
<style>
  #hidden {
   display: none;
   }
</style>
</head>

<body>
    <h1">This line is a Visible.</h1>
    <h1 id="hidden">This line is a hidden.</h1>
    <p>This line is again visible.</p>  
</body>
</html>

Выход

CSS Display None

This line is a Visible.

This line is a hidden.

This line is a Visible.