# CSS Library Documentation: Margin & Padding System
## Introduction
Welcome to the documentation for the **mp.css** library. This lightweight CSS library provides a predefined set of margin and padding classes to simplify spacing management in your web projects. Designed with responsiveness in mind, it includes styles for desktops, tablets, and mobile devices.
## Features
- **Predefined spacing classes**: From `1px` to `100px`
- **Support for all directions**: `top`, `bottom`, `left`, `right`
- **Mobile and tablet-specific styles**
- **Lightweight and easy to implement**
## Installation
Simply include the `mp.css` file in your project:
```html
```
## Usage
### Margin Classes
Use the following classes to add margins to elements:
- `.tm-10` → `margin-top: 10px;`
- `.bm-20` → `margin-bottom: 20px;`
- `.rm-15` → `margin-right: 15px;`
- `.lm-5` → `margin-left: 5px;`
Example:
```html
This div has a top margin of 20px and a bottom margin of 10px.
```
### Padding Classes
Use these classes to apply padding:
- `.tp-5` → `padding-top: 5px;`
- `.bp-10` → `padding-bottom: 10px;`
- `.rp-15` → `padding-right: 15px;`
- `.lp-20` → `padding-left: 20px;`
Example:
```html
This paragraph has top and bottom padding of 10px.
``` ## Responsive Design ### Mobile (≤ 480px) For mobile screens, use `mtm-*`, `mbm-*`, `mrm-*`, `mlm-*`, `mtp-*`, `mbp-*`, `mrp-*`, and `mlp-*` classes. ```css @media (max-width: 480px) { .mtm-10 { margin-top: 10px; } } ``` ### Tablet (481px - 768px) For tablets, use `ttm-*`, `tbm-*`, `trm-*`, `tlm-*`, `ttp-*`, `tbp-*`, `trp-*`, and `tlp-*` classes. ```css @media (min-width: 481px) and (max-width: 768px) { .ttm-20 { margin-top: 20px; } } ``` ## Conclusion The **mp.css** library provides an easy-to-use system for managing margins and padding in web design. It is lightweight, flexible, and enhances responsive design. Include it in your project today for effortless spacing management!
फ़रवरी 07, 2025
Tags :
hcss
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments