Problem
The issue with the code .block {margin: inherit;} not functioning correctly is due to the use of display: inline;.
margin, padding, and other styling properties on an inline element do not behave as expected.
In essence, inline elements do not have a clear concept of 'shape'. Properties related to shape such as margin, padding, border, transform, width, height do not function properly or at all on inline elements.
It is recommended to use inline-block or block instead of inline.
Solution
If the goal is to align three .block elements in the center of #b, consider utilizing display: flex;.
#b {
display: flex;
justify-content: center; /* Center children horizontally */
align-items: center; /* Center children vertically */
width: 700px;
height: 150px;
margin: 0 auto; /* Center itself horizontally */
/* margin-top: 10%;
margin-left: 20%; */
text-align: center;
border: 2px solid black;
}
.block {
width: 10%;
height: 10%;
border: 2px solid tomato;
padding: 40px 40px;
margin: 2%;
/* margin: inherit; */
border-radius: 10px 10px;
/* display: inline; */
}
<div id="b">
<div class="block">hello1</div>
<div class="block">hello2</div>
<div class="block">hello3</div>
</div>