CSS Layout

Next ❯CSS Position

Used to control the layout of the element

  • turned_in_notLayout Related Properties
    • display
    • visibility
  • The default display value for most elements is block or inline
Display content

The above element takes full available width & starts on a new line

h1 {
  display: block;
  border: 2px solid teal;
}
Displaysubject
Displayclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
h1 {
  display: block;
  border: 2px solid teal;
}
</style>
</head>
<body>
  <h1>Display content</h1>
</body>
</html>
  • label_outlineTryout more
    PropertiesValues
    display:
  • label_outlineMore Display property values
    ValuesDiscription
    flexDisplays an element as a block-level flex container
    inline-flexDisplays an element as an inline-level flex container
    gridDisplays an element as a block-level grid container
    inline-gridDisplays an element as an inline-level grid container
    inline-tableDisplays an element as an inline-level table
    list-itemDisplays an element like a <li>element
    tableDisplays an element like a <table>element
    table-captionDisplays an element like a <caption>element
    table-column-groupDisplays an element like a <colgroup>element
    table-header-groupDisplays an element like a <thead>element
    table-footer-groupDisplays an element like a <tfoot>element
    table-row-groupDisplays an element like a <tbody>element
    table-cellDisplays an element like a <td>element
    table-columnDisplays an element like a <col>element
    table-rowDisplays an element like a <tr>element

Check content 1
Check content 2
Check content 3

The above content 2 is visible

visibility:
#content2 {
  visibility: visible;
}
h1{
  text-align: center;
  border: 2px solid teal;
}
visibilitysubject
visibilityclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#content2 {
  visibility: visible;
}
h1{
  text-align: center;
  border: 2px solid teal;
}
</style>
</head>
<body>
  <h1>Check content 1</h1>
  <h1 id="content2">Check content 2</h1>
  <h1>Check content 3</h1>
</body>
</html>

  • CSS Position
❮ Prev CSS Table
Next ❯CSS Position
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯