Question

我有以下html和CSS代码

async function getImageData(url) {
  const img = await loadImage(url);
  return { width: img.naturalWidth, height: img.naturalHeight };
}
async function ready() {
  console.log(await getImageData(this.url))
}

当我尝试为上述HTML代码提供以下css代码时，

<body>
        <div class='topBar'>
            <form action='q.php' method='GET' class='sPage'>
                <input type='text' class='search lt' placeholder='Search' name='s' autofocus='autofocus' style='border-bottom:0px;'>
                <input type='submit' class='srchBtn lt' value='Go' style='background:#FFF; color:#E40046;'>
            </form>
        </div>
</body>

问题是margin-top属性还会降低toBar div。我只希望它能让sPage失效。我该如何解决呢？

Answer 1

如果没有其他CSS发生冲突，可能是保证金最低点，也许你没有注意到任何变化，因为顶部的5px几乎没有。尝试将值增加到30px或50px，您会注意到边距。

Answer 2

取决于父元素和子元素的位置属性。

如果父位置为absolute或fixed：

任何位置的孩子都会从父母的上边框开出边缘

如果父位置为relative的{{1}}：

位置static或relative的孩子会使父级保证金最高
位置static或absolute的孩子将从父母的顶部边框开出边缘

描述图像是情况1,2,3。绿色方块是父级，红色方块是子级，灰色方块是任何位置的祖父级。

红色：fixed

CSS与<br/>标签冲突

2 个答案: