0

My Code:

#b {
  width: 700px;
  height: 150px;
  margin-top: 10%;
  margin-left: 20%;
  text-align: center;
  border: 2px solid black;
}

.block {
  width : 10%;
  height : 10%;
  border: 2px solid black;
  padding: 40px 40px;
  margin: inherit;
  border-radius: 10px 10px;
  display: inline;
}
<div id = "b">
  <div class = "block">hello</div>
  <div class = "block">hello</div>
  <div class = "block">hello</div>
</div>

I used the above code to give margin to the inner div tag but it's not working properly . . .

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
user15367939
  • 23
  • 7
  • 1
    Can you explain your question more. What exactly do you want to happen? – BFP Mar 11 '21 at 07:17
  • 1
    Its not clear what your intended ui is. However, if you are trying to set margin, you might want to rethink `display:inline`. https://stackoverflow.com/questions/5699967/displayinline-with-margin-padding-width-height and https://stackoverflow.com/questions/26448633/inline-element-does-not-accept-margin-top – Suraj Rao Mar 11 '21 at 07:21
  • Because of `display: inline;` – Miu Mar 11 '21 at 07:23

1 Answers1

0

Issue

The reason why .block {margin: inherit;} isn't working properly is display: inline;. margin, padding etc on an inline element do not behave as expected.

Briefly, inline elements have no concept of 'shape'. margin, padding, border, transform, width, height etc are about shape, which means they don't work properly/at all on inline elements.

Please use inline-block or block instead of inline.

Solution

I'm not sure what you exactly expect, but if you want to line up three .blocks in the center of #b, please consider using 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>
Miu
  • 846
  • 8
  • 22