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 a way to understand how elements on a web page are sized and spaced. It includes four parts: the content (where text or images go), padding (space around the content), border (a line around the padding), and margin (space outside the border). By default, the width and height only include the content, but you can adjust this with 'box-sizing'.
/* This setting includes padding and border in the element's total size */
.container {
box-sizing: border-box;
}
The 'box-sizing' property changes how the width and height of an element are calculated. Using 'border-box' makes sure that padding and borders are included in the width and height you set.
/* Ensure the box's size includes padding and border */
#box-example {
box-sizing: border-box;
}
Margin collapse occurs when the margins of two or more elements overlap and combine into a single margin. This prevents the total margin from being larger than necessary.
/* Margins of adjacent blocks combine into one margin */
.block-one {
margin: 20px;
}
.block-two {
margin: 30px;
}
The 'auto' value for margins helps center an element horizontally within its container by distributing space evenly on both sides.
/* Center an element horizontally within its container */
div {
margin: auto;
}
When content is too big for its container, you can use the 'overflow' property to add scrollbars or hide the extra content. This helps manage how content is displayed when it spills out.
/* Add scrollbars if content overflows */
.small-block {
overflow: scroll;
}
Use 'max-width' and 'min-width' to set limits on how big or small an element can be. This ensures the element stays within a specific size range.
/* The element will not be wider than 200 pixels */
.column {
max-width: 200px;
width: 500px;
}
The 'visibility' property hides an element from view while keeping its space in the layout. This means the element won’t be seen but will still affect the positioning of other elements.
/* Hide elements without removing their layout space */
.invisible-elements {
visibility: hidden;
}
The 'z-index' property controls which elements appear on top when they overlap. Elements with a higher 'z-index' will appear above those with a lower value.
/* Make sure `element1` is on top of `element2` */
.element1 {
position: absolute;
z-index: 1;
}
.element2 {
position: absolute;
z-index: -1;
}
Use 'position: fixed' to keep an element in a specific spot on the screen, even when you scroll. This is useful for items like a navigation bar that should stay visible.
/* Keep the navbar fixed at the top of the page */
#navbar {
position: fixed;
}
The 'display' property determines how an element is shown on the page. For example, 'block' elements take up the full width of their container, 'inline' elements only use as much space as needed, and 'inline-block' elements combine both features.
/* Different display settings for elements */
.container1 {
display: block;
}
.container2 {
display: inline;
}
.container3 {
display: inline-block;
}
The 'position: absolute' property positions an element relative to its closest positioned ancestor. This allows you to place the element precisely on the page without affecting other elements.
/* Position the element exactly where you want */
.element {
position: absolute;
}
With 'position: relative', an element is positioned relative to where it normally would be. You can then move it from that spot without affecting the layout of other elements.
/* Move the element from its original location */
.element {
position: relative;
}
The 'float' property moves an element to the left or right of its container, allowing text and other elements to wrap around it. This is often used for images or text blocks.
/* Float elements to the left or right side */
.left {
float: left;
}
.right {
float: right;
}
The 'clear' property prevents elements from floating beside or around a floated element. This helps ensure that elements are properly spaced and positioned.
/* Prevent floating elements from affecting this one */
.element {
clear: both;
}
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