Understand the core difference in usage of logical margin (margin-block-start , margin-block-end , margin-inline-start , margin-inline-end) as well as logical padding, logical border.
Keep the image in mind.
By default:(writing-mode:horizontal-tb)
margin-block-start means == margin-top
margin-block-end means == margin-bottom
margin-inline-start means == margin-left
margin-inline-end means == margin-right
example:
codepen link
It behaves differently,
when using writing-mode:vertical-lr :
margin-block-start means == margin-left
margin-block-end means == margin-right
margin-inline-start means == margin-top
margin-inline-end means == margin-bottom
example:
codepen link
It behaves another way,
when using writing-mode:vertical-rl :
margin-block-start means == margin-right
margin-block-end means == margin-left
margin-inline-start means == margin-top
margin-inline-end means == margin-bottom
example:
codepen link
Basically, each margin-block/inline-start/end property will be mapped to a margin-top/left/bottom/right property based on the values of writing-mode , direction, and text-orientation. This concept is same for logical padding and logical border.
HAPPY CODING!!!😃
Top comments (0)