Difference between LAMP, MAMP and WAMP Stack

How to set padding inside an element using CSS?

Last Updated : 08 Jun, 2023

In this article, we are going to see how to set padding inside an element using CSS. Padding is considered as the space between content and its border. The padding creates space inside defined borders. The difference between padding and margin is that margin creates space outside borders and padding creates space for content inside the border (the border is just any tag having its area assigned to it).

We can use the below properties to set the padding inside an element.

Syntax:

/* Set padding to all sides
   padding: numberpx;

/* Set padding to specific side
   padding-top: numberpx;
   padding-right: numberpx;
   padding-left: numberpx;
   padding-bottom: numberpx;

Approach: We will create a button tag having padding set to its various sides using the padding property in CSS. Below is the code that illustrates the use of padding.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        button {
            padding-top: 10px;
            padding-bottom: 20px;
            padding-right: 30px;
            padding-left: 40px;
        }
    </style>
</head>
 
<body>
    <button>
        GeeksforGeeks
    </button>
</body>
</html>

Output:

Explanation: Here we created a button and then used CSS to change its padding property from each side differently.

Difference between LAMP, MAMP and WAMP Stack

devangj9689

Improve

Article Tags :

Similar Reads

How to set padding around an element using CSS ?

In this article, we will learn How to set the padding around an element using CSS. Approach: The padding is the space between the content of the element and its boundaries. We can set the padding around an element using the padding property of the CSS. It takes four values top_padding, right_padding

How to set the margins of a paragraph element using CSS ?

The CSS margins properties are used to make space around components, outside any characterized borders. With CSS, you have full power over the margins. There are properties for setting the edge for each side of a component (top, right, base, and left). CSS has properties for indicating the edge for

How to insert line break before an element using CSS?

The white-space property is used to insert the line break before an element. This property controls the text wrapping and white-spacing. Line break between the lines: The line break can be added between the line of text. The white-space: preline; is used to insert line break before an element. Examp

How to set line height in percent using CSS ?

The line-height property in CSS is used to set the line height in percentage by using the line-height: percent; property. This percentage is calculated based on the element's font size, allowing for flexible spacing between lines of text relative to their size. Syntax line-height: percent;Example 1:

How to add a box-shadow on one side of an element using CSS?

The box-shadow property is used to set the box shadow on one side of element. Syntax: box-shadow: h-offset v-offset blur spread color; box-shadows values: h-offset: It is required and used to set the position of the shadow horizontally. The positive value is used to set the shadow on right side of t

How to Set Width and Height of Span Element using CSS ?

The <span> tag is used to apply styles or scripting to a specific part of text within a larger block of content. The <span> tag is an inline element, you may encounter scenarios where setting its width and height becomes necessary. This article explores various approaches to set the widt

How to Set 100% Height with Padding/Margin in CSS ?

In this article, we'll explore CSS layouts with 100% width/height while accommodating padding and margins. In the process of web page design, it is often faced with scenarios where the intention is to have an element fill the entire width and/or height of its parent container, while also maintaining

How to add a specific color to an element using CSS ?

In this article, we will discuss elements and how to add a specific color to an element using CSS properties. Basically, the HTML element is the collection of start and end tags with the content inserted in between them. Elements can be nested. <tagname> Content </tagname> Note: Please r

How to add border to an element on mouse hover using CSS ?

Adding a border to an element on mouse hover using CSS involves changing the element's border style when the mouse pointer is over it. This effect enhances user interaction by visually highlighting the element, achieved using the :hover pseudo-class to modify border properties. Approach HTML Structu

How to Style an hr Element with CSS?

The <hr> element in HTML is used to create a horizontal line or thematic break between sections of a webpage. By default, it shows as a solid, thin line that spans the width of its container. You can easily customize the appearance of the <hr> element using CSS to match your website's de