How to set padding inside an element using CSS? Last Updated : 08 Jun, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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. CSS padding-bottom PropertyCSS padding-top PropertyCSS padding-right PropertyCSS padding-left Property 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. Comment More infoAdvertise with us Next Article How to insert line break before an element using CSS? D devangj9689 Follow Improve Article Tags : Web Technologies CSS Web technologies CSS-Properties CSS-Questions +1 More 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 1 min read 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 2 min read How to make an element width: 100% minus padding ? In this article, we will see different examples to make an element's width: of 100% minus padding. We have a few methods to make an element width: 100% minus padding which are described in detail below. Table of ContentUsing 'calc()' and 'box-sizing'Using Flexbox Container MethodApproach 1: Using 'c 4 min read 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 4 min read How to Right Align Div Elements in CSS? In CSS, to right-align <div> elements, there are multiple methods available that can be used. Each method serves a different purpose, making it easy to choose the best one depending on your needs. 1. Using Float PropertyThe float property in CSS is used to right-align a <div> by applying 3 min read How to add space (" ") after an element using :after selector in CSS ? The :after selector in CSS is used to add the same content multiple times after the content of other elements. It inserts something after the content of each selected element. Syntax: :after { // CSS Property}Example 1: This example uses :after selector to add space after an element. html <!-- HT 1 min read Like