Paddings & Scrollbars in CSS

Ad Code

Paddings & Scrollbars in CSS

RK Tutorials September 28, 2023

Paddings & Scrollbars in CSS

Paddings Property

It allows us to define how much space between the content of an element and its border. This can take a value in terms of length of % or px. We use following properties to set padding of element.

  • padding
  • padding-bottom
  • padding-top
  • padding-left
  • padding-right

Example

<html>
<head>
<style>
 p {
        padding-top: 15px;
        border:1px solid black;
}
</style>
</head>
<body>

<p>Top padding example using px.</p>
<p style = "padding-top: 6%; border:1px solid black;">Top padding example in percent.</p>
</body>
</html>


Output of above code

Top padding example using px.

Top padding example in percent.


Following shorthand notation can take one, two, three, or four whitespace separated values.

  • If one value is specified, applied to all four sides.
  • If two values are specified, the first value is applied to the top and bottom side, and the second value is applied to the right and left side of the element's box.
  • If three values are specified, the first value is applied to the top, second value is applied to right and left side, and the last value is applied to the bottom.
  • If four values are specified, they are applied to the top, right, bottom and the left side of the element's box respectively in the specified order.

Example

h1 {
    margin: 30px; /* apply to all four sides */
}
p {
    margin: 20px 70px; /* vertical | horizontal */
}
div {
    margin: 20px 50px 70px; /* top | horizontal | bottom */
}
hr {
    margin: 20px 50px 70px 90px; /* top | right | bottom | left */
}


Scrollbars
When an element's content might be larger than the amount of space allocated to it then use scrollbar.

  • visible:It allows the content to overflow the borders of its containing element.
  • hidden:It allows the content to simply cut off at the border of the containing element and no scrollbars is visible.
  • scroll:Scrollbars are added to allow the user to scroll to see the content.
  • auto:Scroll, but the scrollbar will be shown only if the content does overflow.

Example

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 2px solid red;
            padding:7px;
            margin-top:7px;
            width:400px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:250px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         CSS stands for Cascading Style Sheets, Cascading style sheets is a specification created by the W3C which allows web developers to create style documents to control textual features and the positioning of objects on the page. Style sheets represent a major breakthrough for Web page designers.
A style defines the appearance of a document element. The collection of styles for a Web page or Website is known as a style sheet.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         CSS stands for Cascading Style Sheets, Cascading style sheets is a specification created by the W3C which allows web developers to create style documents to control textual features and the positioning of objects on the page. Style sheets represent a major breakthrough for Web page designers.
A style defines the appearance of a document element. The collection of styles for a Web page or Website is known as a style sheet.
      </div>
   </body>
</html>


Output

Example of scroll value:

CSS stands for Cascading Style Sheets, Cascading style sheets is a specification created by the W3C which allows web developers to create style documents to control textual features and the positioning of objects on the page. Style sheets represent a major breakthrough for Web page designers. A style defines the appearance of a document element. The collection of styles for a Web page or Website is known as a style sheet.

Example of auto value:

CSS stands for Cascading Style Sheets, Cascading style sheets is a specification created by the W3C which allows web developers to create style documents to control textual features and the positioning of objects on the page. Style sheets represent a major breakthrough for Web page designers. A style defines the appearance of a document element. The collection of styles for a Web page or Website is known as a style sheet.


Positioning

CSS allows us to position our HTML element. We can specify whether the element positioned relative to its natural position in the page or absolute based on its parent element.

CSS Absolute Positioning


The absolute positioning is used to place any page element exactly where we want it. We use the positioning attributes top, left, bottom, and right to set the location. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements.

Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h2 {  
    position: absolute;  
    left: 150px;  
    top: 50px;  
}  
</style>  
</head>  
<body>  
<h2>This heading has an absolute position</h2>  
<p> The heading below is placed 150px from the left and 50px from the top of the page.</p>  
</body>  
</html>


Relative Positioning


The relative positioning property is used to set the element relative to its normal position.
Example

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h2.pos_left {  
    position: relative;  
    left: -10px;  
}  
h2.pos_right {  
    position: relative;  
    left: 30px;  
}  
</style>  
</head>  
<body>  
<h2>This is a heading with no position</h2>  
<h2 class="pos_left">This heading is positioned left according to its normal position</h2>  
<h2 class="pos_right">This heading is positioned right according to its normal position</h2>  
<p>The style "left:-30px" subtracts 30 pixels from the element's original left position.</p>  
<p>The style "left:30px" adds 30 pixels to the element's original left position.</p>  
</body>  
</html>


 

RK Tutorials

Posted by RK Tutorials

Post a Comment

0 Comments

Ad Code