Online Training
Q4 2024
Nov 19 to Dec 10
11.00 AM EST: USA, UK, Canada, Mexico and Europe
06.00 AM GMT: MiddleEast, Asia and Australia
The CSS box model is how the browser calculates the size of elements on a page. The `box-sizing` property decides whether the width and height include padding and borders. `content-box` only includes the content itself. `border-box` includes content, padding, and borders in the width and height.
.container {
box-sizing: border-box; /* This makes the width and height include padding and borders */
}
When you set `box-sizing` to `border-box`, the width and height you set will include padding and borders.
#box-example {
box-sizing: border-box; /* Width and height include padding and borders */
}
Sometimes, vertical margins of adjacent blocks merge into one larger margin instead of adding up.
/* If both margins are 20px and 30px, the result is 30px due to margin collapse */
.block-one {
margin: 20px;
}
.block-two {
margin: 30px;
}
Setting `margin: auto` horizontally centers an element within its container. The remaining space is evenly split between the left and right margins.
/* Centers the element horizontally within its container */
div {
margin: auto;
}
The `overflow` property determines how to handle content that is too large for its container. Setting `overflow: scroll` adds scrollbars if needed.
.small-block {
overflow: scroll;
}
The `max-width` property sets the maximum width an element can be, regardless of the `width` property value. This ensures the element doesn’t exceed a certain size.
/* Limits the width to 200px, even if `width` is set to 500px */
.column {
max-width: 200px;
width: 500px;
}
The `visibility` property controls whether an element is visible or hidden. Setting it to `hidden` will make the element invisible but still take up space.
.invisible-elements {
visibility: hidden;
}
The `z-index` property controls how far forward or backward an element appears when it overlaps other elements. Higher values appear on top.
/* `element1` will be on top of `element2` */
.element1 {
position: absolute;
z-index: 1;
}
.element2 {
position: absolute;
z-index: -1;
}
Setting `position: fixed` keeps an element in the same place on the screen, even when scrolling. This is useful for navigation bars that stay in view.
#navbar {
position: fixed;
}
The `display` property determines how an element is rendered. Common values include `block` (takes up full width and starts on a new line), `inline` (takes up only as much width as necessary), and `inline-block` (combines `inline` and `block` characteristics).
.container1 {
display: block;
}
.container2 {
display: inline;
}
.container3 {
display: inline-block;
}
Setting `position: absolute` removes the element from the normal document flow and positions it relative to its nearest positioned ancestor.
.element {
position: absolute;
}
Setting `position: relative` positions an element relative to its normal position, allowing for adjustments using `top`, `right`, `bottom`, or `left` properties.
.element {
position: relative;
}
The `float` property positions an element to the left or right, allowing text and inline elements to wrap around it.
/* Floats the content to the left */
.left {
float: left;
}
/* Floats the content to the right */
.right {
float: right;
}
The `clear` property controls the behavior of elements next to floated elements. It can prevent floating elements from affecting layout.
/* Clears any floats on the left side */
.element {
clear: left;
}
/* Clears any floats on the right side */
.element {
clear: right;
}
/* Clears any floats on both sides */
.element {
clear: both;
}
/* Allows floats on both sides */
.element {
clear: none;
}
Favourites
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now
Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.
ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now!
Java
HTML and CSS 
Python
Javascript
Troubleshooting
Blogs
Learn
Tools