CSS - margin-block-end Property
The logical block end margin of an element's is specified by the margin-block-end CSS property, which is translated to a physical margin depending on the writing mode, directionality, and text orientation of the element.
Depending on the values given for writing-mode, direction, and text-orientation, it corresponds to either the margin-left, margin-top, margin-right, or margin-bottom property.
It relates to the elements margin-block-start, margin-inline-start, and margin-inline-end, which specify the element's remaining margins.
Possible Values
The following list covers all the possible values of margin-block-end property which are similar to margin-left property.
<length> - The fixed value of the margin's size.
<percentage> - The percentage of the margin measured in relation to the contained block's inline size, or the writing-mode defined width in a horizontal language.
auto - A percentage of the available horizontal space is allocated to the left margin, with the layout option selected playing a crucial part.
The spacing between the margin-left and margin-right values is equal when both of them are set to auto.
Applies to
All elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Syntax
margin-block-end = <'margin-top'>
CSS margin-block-end - Length Value
The following example demonstrates the usage of margin-block-end with length value.
<html> <head> <style> body { background-color: #F1ECEC; } #customDIV { height: 400px; background-color: #FFF7B0; padding: 20px; } .marginDemo { width: 250px; background-color: #8B78B6; border: 2px dashed #4682B4; margin-block-end: 25px; } .marginBox { width: 250px; background-color: #F3994D; text-align: center; padding: 10px; } </style> </head> <body> <h1>Explore the margin-block-end property</h1> <div id="customDIV"> <p>Orange div elements emphasize margins around the purple box.</p> <div class="marginBox">box</div> <div class="marginDemo"> Example of margin-block-end property. </div> <div class="marginBox">box</div> </div> </body> </html>
CSS margin-block-end - Percentage Value
The following example demonstrates the usage of margin-block-end with percentage value.
<html> <head> <style> body { background-color: #dfe4ed; } #customDIV { height: 400px; background-color: #edecb7; padding: 20px; } .marginDemo { width: 250px; background-color: #65f252; border: 2px dashed #4682B4; margin-block-end: 20%; } .marginBox { width: 250px; background-color: #f5d902; text-align: center; padding: 10px; } </style> </head> <body> <h1>Explore the margin-block-end property</h1> <div id="customDIV"> <p>Yellow div elements emphasize margins around the green box.</p> <div class="marginBox">box</div> <div class="marginDemo"> Example of margin-block-end property. </div> <div class="marginBox">box</div> </div> </body> </html>
CSS margin-block-end - auto Value
The following example demonstrates the usage of margin-block-end with auto value.
<html> <head> <style> body { background-color: #F2EFEF; } #customDIV { height: 400px; background-color: #FFEEA8; padding: 20px; } .marginDemo { width: 250px; background-color: #6495ED; border: 4px dashed #4682B4; margin-block-end: auto; } .marginBox { width: 250px; background-color: #FFA07A; text-align: center; padding: 10px; } </style> </head> <body> <h1>Explore the margin-block-end property</h1> <div id="customDIV"> <p>Orange div elements emphasize margins around the blue box.</p> <div class="marginBox">box</div> <div class="marginDemo"> Example of margin-block-end property. </div> <div class="marginBox">box</div> </div> </body> </html>
CSS margin-block-end - writing-mode
The following example demonstrates the usage of margin-block-end with length value and writing-mode: vertical-rl.
<html> <head> <style> body { background-color: #E3EAE9; } #customDIV { height: 500px; background-color: #FFEACB; padding: 20px; } .marginDemo { width: 50px; background-color: #87CEEB; border: 4px dashed #2E517F; margin-block-end: 20px; writing-mode: vertical-rl; } .marginBox { width: 150px; background-color: #FF9A8B; text-align: center; padding: 10px; } </style> </head> <body> <h1>Explore the margin-block-end property</h1> <div id="customDIV"> <p>Orange div elements emphasize margins around the blue box.</p> <div class="marginBox">box</div> <div class="marginDemo"> Example of margin-block-end property </div> <div class="marginBox">box</div> </div> </body> </html>
To Continue Learning Please Login
Login with Google