Skip to main content

How to use CSS Boxes effectively?

 
The CSS treats each HTML element as if it lives in its own box.You can set several properties that affect the appearance of these boxes. In this article you will see how to:

  • Control the dimension of your boxes
  • Create borders around boxes
  • Show and hide boxes
  • Apply margins and padding for boxes

Dimension of Boxes

By default a box is sized just big enough to hold its contents. To set your own dimensions for a box you can use the height and width properties.The most popular ways to specify the size of a box are to use pixels, percentages, or ems. Traditionally, pixels have been the most popular method because they allow designers to accurately control their size.

When you use percentages, the size of the box is relative to the size of the browser window or, if the box is encased within another box, it is a percentage of the size of the containing box.When you use ems, the size of the box is based on the size of text within it. Designers have recently started to use percentages and ems more for measurements as they try to create designs that are flexible across devices which have different-sized screens.
See the Pen CSS Box Dimensions by Prime Study Hub (@PrimeStudyHub) on CodePen.
In the example above, you can see that a containing
element is used which is 600 pixels wide by 400 pixels high. Inside of this is a paragraph that is 80% of the width and 60% height of the containing element. 

Create Borders Around Boxes

Every box has a border even if it is not visible or is specified to be 0 pixels wide.The border separates the edge of one box from another.If you specify a width for a box, then the borders, margin, and padding are added to its width and height.
The Margins sit outside the edge of the border. You can set the width of a margin to create a gap between the borders of two adjacent boxes. Padding is the space between the border of a box and any content contained within it. Adding padding can increase the readability of its contents..
WITHOUT MARGIN AND PADDING
WITH MARGIN AND PADDING
The margin provides the white space between boxes and the padding provides the white space between the borders and the content. The padding and margin properties are very helpful in adding space between various items on the page.

Designers refer to the space between items on a page as white space. Imagine you had a border around a box. You would not want the text to touch this border or it would become harder to read.Or, imagine you had two boxes sitting side by side (each with a black border). You would not necessarily want the boxes to touch edges as this would make the line look twice as thick on the facing sides.

If the bottom margin of any box touches the top margin of another, the browser will render it differently than you might expect. It will only show the larger of the two margins. If both margins are the same size, it will only show one.

Border Width

The border-width property is used to control the width of a border on any kind of HTML elements. The value of this property can either be given in pixels or using one of the following values:
thin, medium, thick. You can control individual size, color, style of borders using the following syntax.

                    border: 5px solid #00BCD4;

The 5px specifies the width of the border, the solid specifies the type of the border and the Hex code specifies the color of the border.
See the Pen CSS Borders by Prime Study Hub (@PrimeStudyHub) on CodePen.

You can control the style of a borders using border-style properties these are:

  • solid -  a single solid line
  • double - two solid lines (the value of the border-width property creates the sum of the two lines)
  • dotted -  a series of square dots (if your border is 2px wide, then the dots are 2px squared with a 2px gap between each dot)
  • dashed - a series of short lines

Show / Hide Boxes

The visibility property allows you to hide boxes from users but It leaves a space where the element would have been.This property can take two values:

hidden

This hides the element. The below example describes how to hide elements?.
                                   visibility: hidden;

visible

This shows the element.
                                   visibility: visible;
If the visibility of an element is set to hidden, a blank space will appear in its place.If you do not want a blank space to appear, then you should use the display property with a value of none instead.Please note that anyone can view the contents of any elements whose visibility property has been set to hidden by viewing the source in their browser.

Padding

The padding property allows you to specify how much space should appear between the content of an element and its border. The value of this property is most often specified in pixels (although it is also possible to use percentages or ems). If a percentage is used, the padding is a percentage of the browser window (or of the containing box if it is inside another box). 

Please note: If a width is specified for a box, padding is added onto the width of the box.

You can specify different values for each side of a box using:padding-top, padding-right, padding-bottom and padding-left properties. Or you can use a shorthand (where the values are in clockwise order: top, right, bottom, left):    padding: 10px 5px 3px 1px;
The example for padding between each box content is given below,

See the Pen Padding by Prime Study Hub (@PrimeStudyHub) on CodePen.
The value of the padding property is not inherited by child elements in the same way that the color value of the font-family property is; so you need to specify the padding for every element that needs to use it.

Margin

The margin property controls the gap between boxes. Its value is commonly given in pixels, although you may also use percentages or ems.If one box sits on top of another, margins are collapsed , which means the larger of the two margins will be used and the smaller will be disregarded.

Please note: If the width of a box is specified then the margin is added to the width of the box.

You can specify values for each side of a box using:margin-top, margin-right, margin-bottom and margin-left. You can also use the shorthand (where the values are in clockwise order: top, right, bottom, left): margin: 2px 4px 6px 3px;

Sometimes you might see the following, which means that the left and right margins should be 5 pixels and the top and bottom margins should be 15 pixels: margin: 5px 15px;
The value of the margin property is not inherited by child elements in the same way that the color value of the font-family property is, so you need to specify the margin for every element that needs to use it. The example for margin is given below,
See the Pen CSS Margin by Prime Study Hub (@PrimeStudyHub) on CodePen.
This article is created by bunch of references from online. If you like to learn more about the CSS you can leave a comment in the below comment section, we will write an article in those topics.
Labels:

Comments

Post a Comment

Popular posts from this blog

FORCE ORDER in SQL Server

The FORCE ORDER is a query hint it executes the order of the tables exactly specified in a statement. When we use this query hint in a statement it will tell SQL server not to change the order of the joins in the query. Basically, the SQL server rearrange your joins to be in the order that it thinks it will be optimal for your query to execute. Now, Lets see the execution plan without the FORCE ORDER: The above execution plan demonstrates the optimal order of the joins returned by the SQL server. As you can see the order starts from the sales details and goes by bank details to employee details. Suppose if you don't want the SQL server to change the order of the joins in a query you can use FORCE ORDER to stop the default ordering. The syntax for FORCE ORDER query hint is, OPTION ( FORCE ORDER ); Now, Lets see the execution plan with the FORCE ORDER: select * from tbl_EmployeeDetails as e inner join tbl_BankDetails as b on e.Id=b.EmpID inner join tbl_S...
Post a Comment
Read more

How to create comma separated values in SQL server?

Comma Separated Values in SQL Predominantly in reporting, you may gone through a situation where you need to convert a comma separated values into list of rows or to convert a list of rows into single column to display in a report. In this splash reading, you will understand the following: How to convert comma separated data in a column to multiple rows How to convert multiple rows into one comma separated values Using COALESCE function Using STUFF function Convert comma separated data in a column to multiple rows Here we have an Customer table with a list of products bought by each customer, ID CUSTOMER PRODUCTS 1 Stuart Chain Saw,Circular Saw 2 Michael Drill,Hammer 3 Jonathan Sticky Notes,Mouse 4 Nabeel Mobile,Headset Suppose you want to return this as a single table, list of products bought by each customer. we need to create a function that splits our comma separated col...
2 comments
Read more

OPTION (MERGE JOIN) in SQL Server

OPTION (MERGE JOIN) in SQL Server The MERGE JOIN query hint is a best available join algorithm in SQL server. It is based on first sorting  both data sets according to the join conditions and then traversing through the sorted data sets and finding matches. The MERGE JOIN itself is very fast, but it can be an expensive choice if sort operations are required. This produces the best optimal execution plan. The syntax is, OPTION ( MERGE JOIN ); Now, Lets see how to use MERGE JOIN with SELECT statement.? select * from tbl_EmployeeDetails as e inner join tbl_BankDetails as b on b.EmpId=e.Id OPTION(MERGE JOIN); The statement returned optimal execution plan is, The MERGE JOIN operator gets a row from each input and compares them. In above statement, it merges all joins and first sorting data sets and then traversing through the sorted data sets and finding matches, if they are equal the rows are returned. If they are not equal, the lower-value row is rem...
Post a Comment
Read more

How to manipulate JSON data in SQL server?

Manipulate JSON data in SQL Server JavaScript Object Notation (JSON) is a lightweight popular data exchangeable format used across modern IoT platforms, web and mobile applications etc. It is a language independent textual data format. JavaScript Object Notation (JSON) is also used for storing unstructured data in log files or NoSQL Databases such as Microsoft Azure Cosmos DB. Many RESTful web services that allow us to store and retrieve JSON formatted texts among different protocols using different Endpoints. The example of JSON text is as follows, [{         "customer":"Michael",         "products":["Watch","Mobile","Books"] }, {         "customer":"Stuart",         "products":["Laptop","Keyboard","Mouse"] } ] In this article you will understand the following, Read JSON data from table Modify JSON data in a table Validate JSON objects  ...
Post a Comment
Read more

OPTION Loop Join in SQL Server

The OPTION ( LOOP JOIN ) would enforce LOOP JOIN across all joins in the query. Using the OPTION ( LOOP JOIN ) appears to allows the query optimizer to join the tables using the nested loops in which ever order SQL server decides it is optimal. The OPTION clause must be a last clause in a statement. The syntax is, OPTION ( LOOP JOIN ); Now, Lets see how to use LOOP JOIN with SELECT statement.? select *from tbl_EmployeeDetails as e inner join tbl_BankDetails as b on b.EmpID=e.Id inner join tbl_SalesDetails as s on s.BankId=b.Id OPTION(LOOP JOIN); The statement returned execution plan is, The above statement loops through all the joins that starts from sales details and goes by bank details to employee details in which the order that SQL server thinks it is optimal. This does not follow the order of joins that we specify. Suppose, if you want the SQL server to follow the order of joins that you specify you have to use FORCE ORDER in OPTION clause. Howe...
1 comment
Read more