The padding property in CSS allows you to set the padding for padding-top, padding-right, padding-bottom, padding-left. It is a shorthand property. For example padding:10px 5px 7px 10px; Here, top padding is 10px right padding is 5px bottom padding is 7px left padding is 10px Syntax The syntax of CSS padding property is as follows − Selector { padding: /*value*/ } The value can be − padding-top padding-right padding-bottom padding-left The following examples illustrate CSS padding shorthand property − Padding property with all the values The padding property with all ... Read More

Relative length units in CSS are used to specify a length relative to another length property. Let use see some key units in CSS with the description − Sr.No Unit & Description 1 emRelative to the font-size of the element i.e 4em means 4 times the size of the current font. 2 exRelative to the x-height of the current font 3 chRelative to width of the 0 4 remRelative to font-size of the root element 5 vwRelative to 1% of the width of the viewport* 6 ... Read More

To set column rules, you can use the shorthand column-rule property, which allows you to set the following properties − column-rule-width: set the width of the rule between columns column-rule-style: set the style of the rule between columns column-rule-color: set the rule of the rule between columns The value for column rules can be set as − column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit; column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit; Also, the properties can be used separately. We will see both the examples. Column-rule shorthand property In this example, we have set the column-rule using the shorthand property − column-rule: ... Read More

Background position is to set the beginning position of a background image. For this, use the background-position property.ExampleLet us now see an example − Live Demo body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png");    background-repeat: no-repeat;    background-attachment: fixed;    color: blue;    background-position: left center; } .demo {    text-decoration: overline underline; } Details Examination Center near ABC College. Exam begins at 9AM. OutputExampleLet us now see another example − Live Demo body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png");    background-repeat: no-repeat;    background-attachment: fixed;    color: blue;    background-position: 50% 50%; } Details Examination Center near ABC College. Exam begins at 9AM. Output

To set background color using CSS, use the background-color property.ExampleLet us now see an example − Live Demo .demo {    text-decoration: overline underline;    background-color: red; } Details Examination Center near ABC College. Exam begins at 9AM. OutputExampleLet us now see another example − Live Demo .demo {    text-decoration: overline underline; } Details Examination Center near ABC College. Exam begins at 9AM. Output

With relative positioning, the element is positioned relative to its normal position. For this, use position: relativeExampleLet us now see an example − Live Demo div.demo {    position: relative;    color: white;    background-color: orange;    border: 2px dashed blue;    left: 50px; } Demo Heading This is demo text. This is demo text. position: relative; This is another demo text. Output

With static positioning, the elements are not affected by the top, bottom, left, and right properties. For this, use position: static.ExampleLet us now see an example − Live Demo div.static {    position: static;    color: white;    background-color: orange;    border: 2px dashed blue; } Demo Heading This is demo text. This is demo text. position: static; This is another demo text. Output

To set line height, use the line-height property. Followng are the property values −line-height: normal|number|length|initial|inherit;ExampleLet us now see an example − Live Demo div {    line-height: 1.9; } Demo Heading This is demo text. This is another demo text. OutputExampleLet us now see another example − Live Demo div {    line-height: 200%; } Demo Heading This is demo text. This is another demo text. Output

The fonts, height, width, margins, padding, etc. are set on a web page with the length units. For example, height 100px, width 100px, font 2em, etc. These length units are categorised into Absolute and Relative Units. CSS Absolute Units The absolute length units are fixed in relation to each other. These units are used when the output format is already known. The following are some of the Absolute Length Units − Sr.No Unit & Description 1 cmcentimeters 2 mmmillimeters 3 ininches (1in = 96px = 2.54cm) 4 px *pixels (1px ... Read More

The translate() function in CSS is used to reposition an element in a horizontal and vertical direction. If you want to move an element from the current position along the X- and the Y-axis, use the translate() function. Syntax The syntax is as follows − Transform: translate(x, y) Above, transform the element along with x-axis and y-axis. Translate an image In this example, we will translate i.e., move an image using the translate() method. Set it using the transform property − .translate_img { transform: translate(50px, 20px); } Example Let us now see the ... Read More