Question

对不起，我误会了，但我不知道保证金的运作方式。我读了很多示例，但我不知道它为什么以及为什么对我不起作用。

我有以下用HTML编写的脚本：

<img style="display:inline-block; margin-bottom: 20; margin-left: 3%; margin-right: 10%; margin-right: 5%;" src="\C:\Users\user\Desktop\website\static\rickandmortygif1.gif" style="position:relative; top: 420px; left: 32px;" width="480" height="270" class="rickandmortyGif"></img>
<strong1 style="display:inline-block; margin-bottom: 50%; margin-left: 10%;">I can't believe i actually did this, wow i really need to find</strong1>

现在由于某种原因，当我在边距中使用img百分比时，它会移动img。我不知道为什么我想要的是能够根据需要在代码中放置所有内容，如果我希望图像更高，那么我将只更改百分比，而不会影响其他元素。

Answer 1

使用画布的百分比（打开网站的屏幕大小）假设您的屏幕尺寸为1000px，现在您应用margin：2％;因此其计算结果为1000px 2％，大约为20px，因此在所有面上应用20px。

在现实生活中，边距的工作原理是，假设您需要将一个盒子放在一个特定的位置，然后将其放置在需要放置的特定位置，只需在房间中移动盒子即可。将元素从其实际位置移开，您需要使用边距。

<div style='float:left;width:50%;'>
<img style="display:inline-block; margin-bottom: 20; margin-left: 3%; 
 margin-right: 10%; margin-right: 5%;" src="\C:\Users\user\Desktop
\website\static\rickandmortygif1.gif" style="position:relative; top:
420px; left: 32px;" width="480" height="270" class="rickandmortyGif">
</img>
</div>
<div style='float:left;width:50%;'>
<strong1 style="display:inline-block; margin-bottom: 50%; margin-left: 
10%;">I can't believe i actually did this, wow i really need to 
find</strong1>

Answer 2

Margins create extra space around an element. The percentage is often used to define a size as relative to an element's parent object.

Suppose the image is placed inside a 'div' element, the parent element is the 'div' and based on the size of parent element, it decides its margin values and the image adjust itself.

You can go through MDN Margin中的“ href”以更好地理解。

HTML保证金百分比更新

2 个答案: