1

I've a simple css file:

.center {
  margin-left: auto;
  margin-right: auto;
  width: 33%;
}

and simple HTML with few divs:

<div class="center">
  <div> some text here </div>
</div>

Now I was expecting the inner div to inherit the margin and width properties from parent but that didn't happen. I'm trying to re-learn CSS in a proper way so interested in these kinds of seemingly minor but important things. Thanks

Raja
  • 6,354
  • 9
  • 30
  • 34

2 Answers2

2

Only certain CSS properties inherit.

I've borrowed a list from @Blender on this thread. Which CSS properties are inherited?

azimuth
border-collapse
border-spacing
caption-side
color
cursor
direction
elevation
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
pitch-range
pitch
quotes
richness
speak-header
speak-numeral
speak-punctuation
speak
speak-rate
stress
text-align
text-indent
text-transform
visibility
voice-family
volume
white-space
widows
word-spacing
Community
  • 1
  • 1
BR89
  • 716
  • 1
  • 6
  • 23
0

Fiddle

<div class="willbeInheritedDiv childDiv">
    some content
</div>

.willbeInheritedDiv
{
    width:300px;
    height:300px;
}

.childDiv
{
    background-color:green;
}

technically this is not inheritance but you can provide relationship between div classes and in your example you were trying to inherit width, so this can be helpful

Mehmet Eren Yener
  • 2,006
  • 1
  • 23
  • 37