Table Design Css3 Html5

On-Demand

Application Security Testing: An Integral Part of DevOps

>Watch→

Tweet

The CSS Box model is essentially a rectangular box model that is used on sites to manipulate design and appearance, ranging from margins, borders, padding and content. These properties are relevant to the CSS Box:

  • Margin: by establishing a margin a free space is created around some element, thus eliminating the elements in the area outside the border; the margin is transparent

  • Borders: represents the edge of a CSS box, which extends around the pudding and the content, the margin is 0, being invisible, but it is possible to set the style, thickness or color of the border

  • Padding: is the lower edge of the CSS box, namely the outer edge of the content box and the edge of the edge of the border; the transparency is transparent

  • Content: is the content of the CSS box, where both the images and the text are inserted

We use the properties height and weight to set the size of an item so it can be rendered correctly in all browsers. It is very important to know how to set them, because inside the content is the text, pictures, tables and other items representative of nested child items.

Here's an example of the above:


   
     
     


CSS Box Model

the first example

the second example



the third example

CSS Margin

Through these properties, we can create a space around the elements, pushing upwards against other cassettes. Individual properties, which give us complete control over the margins: the left edge, the right edge, the top edge and the lower edge.

Values: , , , {1,4}, inherit>

Margin - single side style

We can use the margin specifying property for each element: margin-left, margin-right, margin-top, margin-bottom. These properties can have the following values: auto, length, percent, initially and inherit. Attention! negative values are not preconditions.

Example:






The margin property

The margin property

CSS Borders

As I have already said, the edge of a CSS box extends around padding and content. The property allows you to set the border color of an element, width and style. These can be divided into many properties:

  • Border-top, border-right, border-bottom, border-left (set the style, thickness, and color of a portion of the edge)
  • Border-style, border-color, border-width (set the style, thickness or color individually, but for all four sides of the border)
  • Border-top-width, border-top-style, border-top-color (individually set one of the three properties of one side of the edge)

Borders with style

Values: none, solid, dotted, hidden, dashed, double, ridge, groove, inset, outset

Borders with color

This color property allows us to set the color of the four curves. The color can be set as follows: rgb (mention rgb values in the palette), name (mention any color name in the palette), hex (a hexagonal value) and transparency.

Values: color, transparent, {1,4}

Border widths

This property specifies the width of the edges. The property can be set as pixels, cm, pt, ems using the three default values: thin, medium or thick.

Values: thin, medium, thick, length

Borders – single side style

You can set a different border style for just one side, or more. So, there is this property to specify the pattern of each border: border-left-style, border-right-style, border-top-style, border-bottom-style

Values: dotted, dashed, solid, double, groove, inset, outset, none

In the example below, we will use several types of values:



	


	

SOLID

DOTTED

DASHED

SOLID - with 2px 6px 12px 18px

SOLID DOTTED DASHED SOLID

SOLID - with black darksalmon darksalmon darksalmon

CSS Padding

Outside the content area of any element, we find the lining that is between the contents and any borders. To set the lining, we use the filler property.

Values: , , {1,4}

Padding - single side style

We can use the property to specify the lining for each part of an element: padding-left, padding-right, padding-top, padding-bottom. To fill, we can use the following values: length, inherit and percentage. Attention! negative values are not allowed.

Here an example:






The padding property

The padding property

CSS Outlines

The contour of a CSS box looks like a border, but it is not part of the box. Practically, it behaves like a border, but it is sketched on the top of the box without moving to the size of the box. This line is drawn around the elements, beyond borders. It has the following contour properties: outline-width, outline-color, outline-style, outline-offset.

Outline width

This property of the contour width determines the contour width, having the following values: , , , .

Outline color

With this property, the outline-color, we can set the contour color. It can be set by the following: rgb (mention rgb values in the palette), name (mention any color name in the palette), hex (a hexagonal value) and invert (a color reversal is performed).

Values: , invert, inherit

Outline style

This property, the outline-style, defines the sketch style through its own values.

Values: auto, solid, dotted, dashed, groove, inset, outset, ridge, none

In the example below, we will use several types of values :



	


CSS outlines

CSS outlines

The contour of a CSS box looks like a border, but it is not part of the box.

Basically, he behaves like a border, but is sketched on the top of the box, without looking at the size of the box.

Conclusion

During this article, you have seen how to use padding, borders and outlines in CSS.

[LIMITED STOCK!] Related eBay Products