CSS Topics
- CSS Intro
- CSS How To
- CSS Editors
- CSS Properties
- accent-color
- align-content
- align-items
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- aspect-ratio
- backdrop-filter
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-end-end-radius
- border-end-start-radius
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-inline
- border-inline-color
- border-inline-end
- border-inline-end-color
- border-inline-end-style
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-style
- border-inline-start-width
- border-inline-style
- border-inline-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-start-end-radius
- border-start-start-radius
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-reflect
- box-shadow
- box-sizing
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip
- clip-path
- color
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- counter-set
- cursor
- direction
- display
- empty-cells
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- font
- font-family
- font-feature-settings
- font-kerning
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-variant
- font-variant-caps
- font-weight
- gap
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphenate-character
- hyphens
- image-rendering
- inline-size
- inset
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inset-inline-start
- isolation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- line-height
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-block
- margin-block-end
- margin-block-start
- margin-bottom
- margin-inline
- margin-inline-end
- margin-inline-start
- margin-left
- margin-right
- margin-top
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- max-block-size
- max-height
- max-inline-size
- max-width
- min-block-size
- min-height
- min-inline-size
- min-width
- mix-blend-mode
- object-fit
- object-position
- offset
- offset-anchor
- offset-distance
- offset-path
- offset-rotate
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-anchor
- overflow-wrap
- overflow-x
- overflow-y
- overscroll-behavior
- overscroll-behavior-block
- overscroll-behavior-inline
- overscroll-behavior-x
- overscroll-behavior-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-break-after
- page-break-before
- page-break-inside
- paint-order
- perspective
- perspective-origin
- place-content
- place-items
- place-self
- pointer-events
- position
- quotes
- resize
- right
- rotate
- row-gap
- scale
- scroll-behavior
- scroll-margin
- scroll-margin-block
- scroll-margin-block-end
- scroll-margin-block-start
- scroll-margin-bottom
- scroll-margin-inline
- scroll-margin-inline-end
- scroll-margin-inline-start
- scroll-margin-left
- scroll-margin-right
- scroll-margin-top
- scroll-padding
- scroll-padding-block
- scroll-padding-block-end
- scroll-padding-block-start
- scroll-padding-bottom
- scroll-padding-inline
- scroll-padding-inline-end
- scroll-padding-inline-start
- scroll-padding-left
- scroll-padding-right
- scroll-padding-top
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- scrollbar-color
- tab-size
- table-layout
- text-align
- text-align-last
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style
- text-decoration-thickness
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-transform
- text-underline-offset
- text-underline-position
- top
- transform
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- translate
- unicode-bidi
- user-select
- vertical-align
- visibility
- white-space
- width
- windows
- word-break
- word-spacing
- word-wrap
- writing-mode
- z-index
- CSS Selectors
- CSS Comments
- CSS Length
- CSS Image Sprites
- CSS Grid Layout
- CSS Grid Flexbox
- CSS @charset Rule
- CSS @font-face Rule
- CSS @import Rule
- CSS @keyframes Rule
- CSS @media Rule
CSS padding-bottom Property
Photo Credit to CodeToFun
🙋 Introduction
The padding-bottom
property in CSS is used to set the padding area on the bottom of an element. Padding is the space between the content of the element and its border.
The padding-bottom
property allows you to control the vertical spacing within an element, providing a way to create visual separation and layout consistency.
💡 Syntax
The syntax for the padding-bottom
property is simple. You can specify the padding using various units, including pixels, ems, percentages, and more.
element {
padding-bottom: value;
}
Here, value can be a length (e.g., px, em, rem, etc.), a percentage (%), or the keyword auto.
🎛️ Default Value
The default value of the padding-bottom
property is 0. This means that if no value is specified, there will be no padding at the bottom of the element.
🏠 Property Values
Value | Description |
---|---|
length | Specifies the bottom padding in fixed units such as pixels (px), ems (em), rems (rem), etc. Example: 10px. |
percentage | Specifies the bottom padding as a percentage of the containing element's width. Example: 5%. |
auto | Allows the browser to calculate the bottom padding automatically. This value is rarely used with padding properties. |
📄 Example
In this example, we'll add padding to the bottom of a <div> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS padding-bottom Example</title>
<style>
.box {
border: 1px solid #000;
padding-bottom: 20px;
background-color: lightgray;
}
</style>
</head>
<body>
<h1>Padding-Bottom Example</h1>
<div class="box">
This box has a padding-bottom of 20px.
</div>
</body>
</html>
In this example, the .box class applies a bottom padding of 20px, creating space between the content and the border of the div.
🖥️ Browser Compatibility
The padding-bottom
property is well-supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It is a fundamental CSS property, so you can use it confidently knowing it will work consistently across different platforms.
🎉 Conclusion
The padding-bottom
property is a crucial tool in CSS for managing the layout and spacing of elements.
By controlling the padding, you can create a clean and visually appealing design, ensuring that elements are appropriately spaced. Whether you're designing a complex web application or a simple webpage, understanding how to use padding properties effectively is essential.
👨💻 Join our Community:
Author
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (CSS padding-bottom Property), please comment here. I will help you immediately.