/* Margin: Sets the margin as top, left, bottom, or right. */
margin: top right bottom left;
/* Padding: Sets the padding as top, left, bottom, or right. */
padding: top right bottom left;
/* Width: Sets an element's width as absolute units or auto. */
width: auto;
/* Height: Sets an element’s height as absolute units or as auto. */
height: auto;
/* Overflow: specifies what should happen if content overflows an element's box. */
overflow: hidden;
/* Visibility: Switches of the visibility of the element but the space occupied. */
visibility: visible;
/* Display: It defines how elements are displayed on the web page. */
display: block;
/* Float: Allows text to wrap around an element */
float: none;
/* Position: It specifies the positioning method of the HTML entity on the web page. */
position: sticky;
button {
font-size: 20px;
padding: 13px;
border-width: 0px;
margin: 8px;
}
THE BOX MODEL:
- Height : default: 0 / height of the content;
- Width : the width that element needs, pushes other elements to side
- Margin : Outside space of an element that pushes other things away from the element
- Padding : Inside space of an element that pushes elements away from the border.
- Border : Outline for an element, outside the element eg.(300px*300px) add border: 303px*303px
div {
width: 50px;
height: 50px;
padding: 10px;
border: 2px solid black;
margin: 5px;
}
/********************** CONTENT *************************
The box that contains the actual element content like text,
image, icon, gif, video,... */
tag_name {
height: 90px;
width: 200px;
}
/********************** PADDING *************************
Distance between the content and the border. The background color,
of the element will never affect this space. But you can see this by
contrasting with the background color of the parent element that
contains your element*/
tag_name {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
/*OR: */
tag_name {
padding: 25px 50px 75px 100px; /* top; right; bottom; left */
}
tag_name {
padding: 25px 50px 75px; /* top; right_&_left; bottom */
}
tag_name {
padding: 25px 50px; /* top_&_bottom; right_&_left */
}
tag_name {
padding: 25px; /* top_&_bottom_&_right_&_left */
}
/********************** BORDER *************************
You can define a frame for your element's box. You can
only see the border, after you define a style for that
property */
tag_name {
border-width: 5px 70px 10px 28px; /* or border-bottom-width: 10px; ... */
border-color: blue; /* or border-top-color: #b52e2e; ... */
border-style: dotted; /* or dashed, or solid, or ... */
border-radius: 70% /* making the corners more rounded */
}
/*OR: */
tag_name {
border: 5px solid red; /* all_widths; style; color */
}
tag_name {
border-left: 6px dotted green; /* width; style; color */
border-top: 34px groove yellow; /* width; style; color */
}
/********************** OUTLINE *************************
It's a line that's drawn around your html element, but
contrary to the border, the dimensions of the outline
aren't taken into account. It's drawn around elements,
outside the borders, to make the element "stand out" */
tag_name {
outline-width: thin; /* or medium; thick; outline-width: 4px; ... */
outline-color: blue; /* or #b52e2e; invert; ... */
outline-style: dotted; /* or dashed, or solid, or ... */
outline-offset: /* making the corners more rounded */
}
/*OR: */
tag_name {
outline: dashed;
}
tag_name {
outline: dotted red;
}
tag_name {
outline: 5px solid yellow; /* all_widths; style; color */
}
tag_name {
outline: thick ridge pink;
}
/********************** MARGIN *************************
This is the distance that separates an html element,
from the other elements around it. The background color,
of the element will never afect this space, because the
margin doesn't have background color. The margin is an
invisible border or space between two objects */
tag_name {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
/*OR: */
tag_name {
margin: 25px 50px 75px 100px; /* top; right; bottom; left */
}
tag_name {
margin: 25px 50px 75px; /* top; right_&_left; bottom */
}
tag_name {
margin: 25px 50px; /* top_&_bottom; right_&_left */
}
tag_name {
margin: 25px; /* top_&_bottom_&_right_&_left */
}
MDN (Mozilla Developer Network)
Probably the best place for an in-depth explanation of
web related technologies.
See the link below regarding the CSS BOX MODEL
Code Example |
---|
Css :: zoom level in css |
Css :: Timeout for a fetch |
Css :: import google fonts into react |
Css :: css animation display none |
Css :: center div vertically and horizontally |
Css :: vertical padding css |
Css :: css set font family for all elements |
Css :: how to add hover effect in emotion |
Css :: @supports css |
Css :: make text bold without font-weight |
Css :: css img src |
Css :: Link design like a Button" |
Css :: html css navbar with dropdown |
Css :: center div css flex |
Css :: linear gradient and url css |
Css :: css keyframes |
Css :: tailwind center absolute |
Css :: how to use local fonts in css |
Css :: line cap css |
Css :: jquery replace css class |
Css :: add notification in css |
Css :: ion-split-pane width |
Css :: import global variables scss angular |
Css :: create arrow div css |
Css :: after icon css |
Css :: background blur css |
Css :: css animate svg circle radius |
Css :: center background image css |
Css :: css noise filter |
Css :: bootstrap table striped change color |