0
私のスピナー・ディグを上に移動したいと考えています。円を動かして負の値であるか正の値であるかにかかわらず、それを中心にするのはimgです。それは私のCodePenで動作しますが、私のWebpageでは動作しません。私はdisplay: inline-block/display: blockとoverflow: hiddenのようないくつかの可能な解決策について読んだが、私のコードではうまくいかないようだ。 Codepenで動作するコードが私のWebページで動作しないのはなぜですか？内側の要素にマージン・トップとマージン・ボトムが適用されない
.bodyImage1 {
float: right;
margin-right: -10%;
width: 250px;
}
.container {
position: relative;
}
/*Advance animation*/
.connector3 {
position: absolute;
display: inline-block;
margin-top: 360px;
width: 0;
height: 2px;
animation: drawConnector 0.7s;
animation-fill-mode: forwards;
background: linear-gradient(to right, #0083f5 15%, #f57300 105%);
}
.spinner1 {
align-items: center;
border: .3em solid transparent;
border-top: .3em solid #f57300;
border-right: .3em solid #f57300;
border-radius: 100%;
display: flex;
justify-content: center;
}
.spinnerOut {
animation: spinnerOne 3s linear infinite;
margin-top: -50%;
margin-left: 150%;
height: 3em;
width: 3em;
}
.spinnerMid {
animation: spinnerOne 5s linear infinite;
height: 2.4em;
width: 2.4em;
}
.spinnerInn {
animation: spinnerOne 5s linear infinite;
height: 1.8em;
width: 1.8em;
}
@keyframes spinnerOne {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}<div class="connector3 block-anim invis">
<div class="spinner1 spinnerOut invis">
<div class="spinner1 spinnerMid">
<div class="spinner1 spinnerInn"></div>
</div>
</div>
</div>
は、おそらくいくつかの他のスタイルはあなたをオーバーライドします。 Webインスペクタで、実際のスタイルが要素にどのように適用されているかをチェックします。あるいは、マージン値に '！important'を追加して、他のスタイルがあなたのものをオーバーライドしているかどうかを確認できます。 –
CodePenで宣言したスタイルは、本番サイトで宣言したスタイルでは表示されません。これは*特異性*問題ではないと信じています。また、問題の要素を調べるときには、クロスアウトするか、または*過大評価する*。だから、あなたはキャッシングを排除したのですか？**もしそうなら、あなたはどうしているのですか？ブラウザはスタイルシートのキャッシュバージョンを（サーバーから）要求していて、スタイルを適用している可能性があります。最新のアップデートが表示されていないことを意味します。 – UncaughtTypeError