HTML问题：为啥img标签对中margin和padding设置效果会完全一样？还有段落P标签也是此效果？请具体解释

Posted 2023-04-14

参考技术A

margin和padding的效果肯定是不一样的

如上图

黑色的那条线是边框，是区分img标签和其他标签的分界点

绿色部分是padding，他是属于img标签的一部分

橘色部分是margin，他用于和其他元素拉开距离，他不是img的一部分

针对用margin还是padding的问题，我个人是这样认为的：

padding 能很好的控制元素内部内容的位置（例如，图片四周的留白，文字在容器内的页边距）

margin 能很好的控制元素之间的位置（例如，2个li之间空一些距离）

修改padding，在box-sizing为border-box的情况下，不会影响其他元素的位置

修改margin，不会对元素本身内容的位置造成影响

通常来说，大多数html元素均为块级元素（块级元素的表现是：以新行开始或结束，例如p，在默认情况下，p是占一整行的）

当然，其他元素可以设定display:block来成为块级元素

针对于img元素来说，设置为块级元素意义不大，因为他已经不能再在自己的内存嵌套其他元素了，设置img为块级元素，大多都是为了解决一些css的兼容性问题，例如在ie6下，设置img为block可以解决图片下面留白的问题

纯手打，希望帮到您

参考技术B 当未设置边框时，外边距（margin）和内边距（padding）在效果上确实没什么本质区别。就好比你家的房子，你的家具距离墙壁的距离是内边距，墙壁与邻居房子的距离是外边距，当把你家房子的墙壁拆掉，家具完全暴露出来后，这时候家具和邻居房子的距离自然也就无所谓外边距还是内边距了。
你试试下面两个p标签就完全明白了：

<p style="border:1px solid #000; margin:10px">这是margin设为10px的效果</p>
<p style="border:1px solid #000; padding:10px">这是padding设为10px的效果</p>

为啥 React.js 删除 <img /> 上的 srcset 标签？

【中文标题】为啥 React.js 删除 <img /> 上的 srcset 标签？

【英文标题】：Why is React.js removing the srcset tag on <img />?为什么 React.js 删除 <img /> 上的 srcset 标签？

【发布时间】：2016-04-14 05:58:13

【问题描述】：

当我的<img /> 标记上有srcset 属性时，为什么它没有显示在浏览器中？似乎通过 React.js 正在剥离它。

<img src="/images/logo.png" srcset="/images/logo-1.5x.png 1.5x, /images/logo-2x.png 2x" />

【参考方案1】：

解决方案是使用srcSet 而不是srcset。

<img src="/images/logo.png" srcSet="/images/logo-1.5x.png 1.5x, /images/logo-2x.png 2x" />

参考：https://facebook.github.io/react/docs/tags-and-attributes.html 下HTML Attributes

【参考方案2】：

另一个使用模板文字的丑陋解决方案：

<img
  alt=''
  src=require('../../assets/images/logo/logo.png')
  srcSet=`
    $require('../../assets/images/logo/[e-mail]') 2x, 
    $require('../../assets/images/logo/[e-mail]') 3x
  `
/>

【讨论】：

如果你在顶部导入文件，你可以让它变得漂亮

@StephaneL 这是否意味着您要在每个浏览器上导入图像？

@Sam 不，Webpack 将图像（或要求）的导入解析为字符串（图像的 uri）。图片数据只会在浏览器请求时获取，浏览器会根据srcSet来决定它需要哪张图片。

【参考方案3】：

尝试使用带有字符串的 srcSet 可能对我不起作用，可能是因为 Webpack 是如何工作的，所以最终导入它们并将它们包含在模板字符串中，如下例所示：

import nat1 from "./img/nat-1.jpg";
import nat1Large from "./img/nat-1-large.jpg";
import nat2 from "./img/nat-2.jpg";
import nat2Large from "./img/nat-2-large.jpg";
import nat3 from "./img/nat-3.jpg";
import nat3Large from "./img/nat-3-large.jpg";


  <div className="composition">
                <img
                  srcSet=`$nat1 300w, $nat1Large 1000w`
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  
                  className="composition__photo composition__photo--p1"
                  src=nat1Large
                />
                <img
                  srcSet=`$nat2 300w, $nat2Large 1000w`
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  
                  className="composition__photo composition__photo--p2"
                  src=nat2Large
                />
                <img
                  srcSet=`$nat3 300w, $nat3Large 1000w`
                  sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
                  
                  className="composition__photo composition__photo--p3"
                  src=nat3Large
                />
  </div>