CSS 特性问题

Question

I have a nested div like this

<div class="myDiv">
   <div class="myOtherDiv">

In my CSS I want myOtherDiv to have margin: 0 auto; but not myDiv margin: 0 auto; but not myDiv

If I write

.myDiv{
   margin: 0 auto;
}

It applies to both with the specificty of 0,1,0

But

 .myDiv .myOtherDiv{
   margin:0 auto;
}

Nothing happens. Which is weird, visual code reports the specificity of this to be 0,2,0 which is higher so should it not apply?

Answer 1

As you have not provided all of the CSS code it is hard to tell. However,

Issues with margin: 0 auto; are you usually a result of the element not being a block element or contain a width .

Since div is a block element naturally, it takes up the entire width available even if you only have 1 letter inside that div(Ie <div>A</div>

You must declare a width before centering your div items.

So for example:

.myDiv {
width: 50%;
margin: 0 auto;
}

Im regards to specificity ,

If the parent <div> doesn't have a width assigned margin:0 auto will not do anything. However, if you assign a width then the block will not occupy all the page's space, and then the block itself is centered, but the items of the child div will not be centered or affected.

If you assign both the child and parent div margin:0 auto without either having a set width it will produce a null effect without affecting positioning at all because each block is just taking up all the space possible within the page.

If you want the child div block centered, then assign a width to the child div, and leave the parent div alone. Since the parent occupies all the page's width space, the child div will be centered on the page using margin:0 auto; and the width you assigned.

Answer 2

.myDiv .myOtherDiv {} or just .myOtherDiv {} should be good to target myOtherDiv.

Did you give the div a width? Block level elements like div's default to 100% widht of their parent. So you need to set a specific smaller width, or use display: table; so the content decides the width. See below:

 .myDiv{ background: blue; } .myOtherDiv{ margin: 0 auto; display: table; background: red; }

 <div class="myDiv"> <div class="myOtherDiv">content </div> </div>