The Display Property in CSS Layout

-
CSS Layout - The display Property
The display property plays a very important role in controlling CSS layout.
The display Property
The display the property specifies how to display an element. Every HTML element has a default display value depending on the type of element. There are two default display values for most of the elements one is block and other is inline.
Block-level Elements
The main feature of a block-level element is that it always starts on a new line and takes up the full width available.
The Display Property in CSS Layout
Block Element

Block-level elements:
  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>
Inline Elements
Sometimes we want to place an element which should take up only a limited portion of the screen then we use Inline Elements. It does not start on a new line and only takes up as much width as needed.
Inline elements:
  • &th;span>
  • <a>
  • <img>
The Display Property in CSS Layout
Inline Block
Display: none
The display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.
The <script > element uses display: none; as default. 
Overriding The Default Display Value
Every element has a default display value. However, you can override this. Changing an inline element to a block element, or vice versa, can be useful for making the page look in a different way, and still follow the web standards.
To make a list element inline <li> elements for horizontal menus:
li {
  display: inline;
}

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have another block elements inside it.
To displays <span> elements as block elements:
span {
  display: block;
}
The example displays <a> elements as block elements:
a {
  display: block;
}
To Hide an Element -Use display:none or visibility:hidden?
display:none;
Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:
h1.hidden {
  display: none;
}
visibility:hidden;
It  also hides an element. But, the element will still take up the same space as before. The element will be hidden, and the space remains reserved by the element in the layout:

h1.hidden {visibility: hidden;}

See Also: Padding in CSS      Margin In CSS

Comments

Post a Comment

Most Popular Posts

Functions in Excel

-
Image
Functions in Excel 2013 A  function  is a  predefined formula  that performs calculations using specific values in a particular order. Excel includes many common functions that can be useful for quickly finding the  sum ,  average ,  count ,  maximum value , and  minimum value  for a range of cells. In order to use functions correctly, you'll need to understand the different  parts of a function  and how to create  arguments  to calculate values and cell references The parts of a function A function must be written a specific way,  called   syntax . The basic syntax for a function is the  equals sign (=) , the  function name  (SUM, for example), and one or more  arguments . Arguments contain the information you want to calculate. The function in the example below would add the values of the cell range A1:A20. Working with arguments Arguments can refer to both  individual cells  and  cell ranges  and must be enclosed within  parentheses . You can include one argumen
Read more

Mixed Supply and Composite Supply under GST

-
Mixed Supply and Composite Supply under GST Let us understand first the term   “supply” simply means all forms of supply of goods/ services. It is carried out during the course of business. There are two types of supplies under GST, Composite and Mixed. Both of these supplies help to determine the correct GST rate and provides uniform tax treatment under GST for such supplies. Bundled Supply A bundled supply means supply of goods and/or services in a combination. This concept was mainly found in service tax where a bundled service meant a combination of two or more services. Here are some ways to identify whether it is a naturally bundled(Composite) or mixed one them: 1.      If buyers mostly expect such services to be provided as a package, then the package will be treated as naturally bundled. For example, most business conventions look for combination of hotel accommodation, auditorium and food. 2. If most of the service providers in the industry provide a package o
Read more

Learn How to Create Company in Tally.ERP9

-
Image
Company Creation Tally.ERP9 Tally.ERP 9 is not a just an  accounting software  but its a complete ERP solution to business organisations such as managing Accounts, Inventory, Payroll and taxations (GST)   compatibility from version Tally.ERP 9 release 6. How to create a company in Tally.ERP 9? To create a company in Tally.ERP 9, Double Click on   tally icon on the desktop. Press Alt+F3 -> Create Company Details to be filled in company creation screen Directory The tally directory will store all data you entered in Tally ERP 9. By default, the data storage will be inside the installation folder. i.e. c:\users\public\tally.erp9\data Name In this field, we are required to type the name of the company, for example. XYZ INC. Primary mailing details Mailing name In this field, we are required to type the name of the company, for example. XYZ INC. Address In this data field, we are required to enter the address of the company. Country Here we
Read more