Padding in Css covers the inside of the block element or structural element.  Margins covers outside the block element or structural element.  Thus, padding will put space between the elements in the block and the edge of the block.  Margins puts space between each block.

Width is the content inside the box minus the margins, padding, and borders.  Height is the content inside the box minus the margins, padding and borders.

The code for margins is

    margin:value where value is in pixels or per cent.   

margin:value all four sides value is in pixels or per cent
margin-top:value top margin only value is in pixels or per cent
margin-bottom:value bottom margin only value is in pixels or per cent
margin-left:value left margin only value is in pixels or per cent
margin-right:value right margin only value is in pixels or per cent
margin:value value vertical horizontal value

value is in pixels or per cent

auto can be used for horizontal

margin:value value value top sides bottom

value is in pixels or per cent

margin:value value value value top right bottom left

value is in pixels or percent

padding:value all four sides value is in pixels or per cent
padding-top:value top only value is in pixels or per cent
padding-bottom:value bottom only value is in pixels or per cent
padding-top:value left only value is in pixels or per cent
padding_right:value right only value is in pixels or per cent
padding:value value vertical horizontal values value is in pixels or per cent
padding:value value value top sides bottom value is in pixels or per cent
padding:value value value value top right bottom left value is in pixels or percent

auto can be used for the horizontal value for margins. This will center the block.

Comments (0)

Children or descendants are always in front of parents or ancestor.

Comments (0)

To hover the mouse over a row and change the color of the row the style needs to come last in the list of style rules, after the nth-child. If it does not come after the nth child rule it will not apply to any of the rows selected by the nth-child rule. An example would be:

/* Highlight table row on hover */

tr:hover{

  background-color yellow;

}

The shape of the cursor can be changed also to some of the following shapes

Mouse pointers and cursor: property values

This would be added to the hover rule as follows

/* Change color of row when hover and change shape of mouse */

tr:hover{

   /* changes row color */

  background-color yellow;

  /* changes shape of the mouse from I-bar back to arrow when hover over text in table */

  cursor:default;

}

 

Comments (0)

The nth child pseudo class is unique to css3.  It can be used with any element type.  Great for tables.

elementType:nth-child(value){

  property:value;

  ...

  }

Replace elementType with the element you are styling. 

Replace value with a keyword or number to indicate which child you want the styling to apply to.  Value accepts two key words odd or even. When odd or even is used with row such as tr{...} it will affect the whole role.  Odd would be 1,3,5,.. rows and Even would be 2,4,6, .. rows.  If you want to work with columns then you would need to identify the data cell within the row.  An example would be

/* Applies to data cell 2 in each table row */

td:nth-child(2){

   text-align:center;

}

Replace property:value with any number of CSS property:value pairs you want to use.

Comments (0)

Borders can be added around each cell. If you want to do that, do it by defining td in CSS file.  The style rule should be done after defining the table style rule{} that uses the td as the selector. This ways all of the cells will be defined the same. If you have head cells defined with the th{} rule then you should do

th, td{

   /* Style rule for all cells including header */

  border:...
}

The space between the cells are called cell spacing. If you do not want any spacing around the cells then you need to use collapse with border and place this in the table{} style rule.

table{

   /* Center the table and have no spacing around the cell borders */

  margin: 1em auto;

  border:collapse;

}

th, td{

  /* solid border around the cells gray in color */

  border: solid 1px gray;

}

 Padding around the information in the cells will make it easier to read the information.  The padding should be added to each cell top, bottom, left and right sides.  This is done in the cell style rule not the table style rule

th, td{

  /* solid border around the cells gray in color */

  border: solid 1px gray;

  /*Add padding of 2 px above and below the information and 4 px  on left and right side of each cell */

  padding: 2px 4px;

}

Comments (0)