边距:自动不适用于具有width属性的<img>元素
边距（Margin）是指元素周围的空白区域，用于控制元素与其他元素之间的距离。在CSS中，可以使用margin属性来设置元素的边距。
边距可以分为四个方向：上（top）、右（right）、下（bottom）、左（left）。可以使用margin-top、margin-right、margin-bottom和margin-left属性分别设置各个方向的边距值。
对于具有width属性的<img>元素，默认情况下，边距是自动不适用的。这意味着<img>元素的边距不会影响其周围的其他元素，也不会受到其他元素的边距影响。
在实际应用中，可以根据需要为<img>元素设置边距，以控制其与其他元素之间的间距。例如，可以使用margin属性为<img>元素设置上下左右的边距值，来调整其在页面中的位置和布局。
腾讯云提供了丰富的云计算产品，其中与前端开发和图片处理相关的产品包括：
- 腾讯云对象存储（COS）：腾讯云对象存储是一种高可用、高可靠、强安全的云存储服务，可以用于存储和管理图片等静态资源。详情请参考：腾讯云对象存储产品介绍
- 腾讯云图片处理（CI）：腾讯云图片处理是一种快速、稳定、安全的图片处理服务，可以对图片进行裁剪、缩放、旋转、水印等操作。详情请参考：腾讯云图片处理产品介绍
通过使用腾讯云的对象存储和图片处理服务，开发者可以方便地管理和处理<img>元素中的图片，实现更好的用户体验和页面布局效果。
相关·内容
2回答
我在一个main div中有两个main div。我试着添加边距和填充一个大的数字来测试，但它就是工作。为什么我不能在它们之间添加边距/填充？请帮帮忙。
HTML
<div id="mainWrapper">
<header class="container">
<div id="nav2" class="container">
<ul class="nav2a">
浏览 0提问于2015-07-14得票数 12
回答已采纳
2回答
第一个孩子的伪类选择器似乎没有任何效果。下面是CSS，后面是HTML：
.social-block a:first-child {
margin-bottom: 20px;
}
<div class="social-block">
<a href="#" target="_blank"><img src="stylesheets/img/socialblock-facebook.png" alt="socialblock-facebook" width=&#
浏览 3提问于2012-09-27得票数 0
回答已采纳
3回答
我有一个有页脚的网站。页脚是一个简单的灰色背景。我想在页脚居中显示一些绝对大小的内容。为了做到这一点，我尝试了以下方法：
<div style="background-color:gray; font-size:10pt; width:100%;">
<div style="margin-left:auto; margin-right:auto; text-align:center;">
<table border="0" cellpadding="0" cellspacing="
浏览 0提问于2011-03-26得票数 0
回答已采纳
问题是在div的中心对齐图像。这是正确的工作在铬，除了IE。
<DIV id="content"><P>Internal resources </P>
<DIV class="containertop">
<P>External resources </P>
</DIV>
<DIV class="contentcontainer">
<DIV class="containerImg">
<img
浏览 1提问于2015-06-02得票数 0
回答已采纳
当涉及到CSS时，我相当精通，但是今天我偶然发现了一个让我抓狂的代码片段(和)。
我从来没有想过可以通过margin: 0 auto将一个绝对定位的元素居中，但是考虑到有问题的元素有一个设置的宽度，并且有left: 0和right: 0，它实际上似乎是有效的：
#parent
{
background: #999;
height: 300px;
position: relative;
width: 300px;
}
#child
{
background: #333;
height: 50px;
left: 0;
margi
浏览 1提问于2015-03-26得票数 18
回答已采纳
2回答
我在stackoverflow上读过其他关于居中的问题，以前也用过这个技巧。
我尝试使用：
<div style="width: 1000px; position: absolute; margin: 300px auto 0px auto;">
content in here
</div>
这并没有使div居中。我做错了什么？我觉得我以前用过这个代码，但是这次它不能工作了。我试着制作了一个新的html文件，并且我尝试了一下，以防我在这个特定的页面上做错了什么。它也有缺陷。这有什么错呢？
浏览 0提问于2011-04-19得票数 0
我正在做这样的事情：
看起来是这样的：
如你所见，有些东西的位置不好，我试着用填充边距来修复它，但它不是垂直移动的，我该如何修复它呢？
我的HTML：
<div class='article-container'>
<div class='article'>
<div class="img-position">
<a href="#"><img src="http://funedit.com/and
浏览 0提问于2014-04-14得票数 0
2回答
很抱歉，我问了一个可能已经被问了无数次的问题，但我找不到答案。我不知道为什么浏览器给了我一个margin-left: 0 auto的Invalid property value，但不知何故在左边加了一点边距(这是一个渲染错误吗？)。它实际上可以在没有-left的情况下工作，但我不知道为什么。 完整的示例代码：http://jsfiddle.net/zw7n0h2j/5/ #wrapper {
width:800px;
}
.figure {
display: block;
/* margin: 0; */
margin-left: 0 auto;
w
浏览 100提问于2021-05-06得票数 1
回答已采纳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tech
浏览 5提问于2021-04-19得票数 2
回答已采纳
我的布局有几个bug，我想知道是否有人能帮我解决问题。我需要删除导航栏上方和页脚下方的空白。其次，我希望所有的页脚元素都在同一行中，而不是被稍微错开。我附上了一个网站的图片，以及与之配套的HTML和CSS。提前感谢！
HTML：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>21st Century Dad</title>
<link type="text/css" rel="stylesheet
浏览 7提问于2017-04-07得票数 0
回答已采纳
下面的css代码是由我写的，当我试图创建一个像mashable.com这样的固定标题，但无论我怎么努力，我似乎不能使logo.png出现与页边距:auto 19px;.Pleae帮助我，并告诉我我做错了什么。我是一个html和css的初学者，所以请温柔点。我想让徽标和导航列表排成一行。
header{position:fixed;
background:#333;
height:128px;}
h1{ display:inline;
float:left;
background:url(images/logo.png) no-repeat;
浏览 0提问于2013-07-11得票数 1
首先，我将向您展示我的代码：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Collapsing Margins Testing</title>
<style type="text/css">
img {
width: 300px;
height: 300px;
}
.first {
浏览 1提问于2016-05-05得票数 0
1回答
我在flex中有一个图片，它在边缘浏览器中延伸，但在其他浏览器中是正常的。这是我的密码和花招。打开彩色和边缘的jsfiddle url ..。我想让它看起来像边缘的铬。
.logo {
height: 100px;
display: -webkit-flex;
display: flex;
-webkit-align-self: center;
align-self: center;
width: 200px;
background: red;
}
.logo img {
width: auto;
height: auto;
margin: auto
浏览 1提问于2016-10-26得票数 1
回答已采纳
在twitter.In源代码的首页有一个全屏图像，它们是这样做的：
HTML：
<div class="front-bg">
<img class="front-image" src="xxx.jpg">
</div>
CSS：
.front-bg {
position: fixed;
width: 200%;
height: 200%;
left: -50%;
}
.front-bg img {
margin: auto;
min-width: 50%;
min-height: 50%;
top: 0;
le
浏览 0提问于2013-02-22得票数 7
3回答
不能移动带页边距的文本
、、、、
我试图编码我的第一个模板，我遇到了一个问题。我试图用页边距函数移动我的链接(home/“)，但它不移动。但是其他文本我可以用边距移动。那么为什么我不能移动一些具有边距功能的文本呢？
body {
margin:0;
padding:0;
}
#header {
background-color:#353C3E;
height:80px;
width:100%;
position:relative;
}
.header_content {
width:946px;
position:relative;
margin:0
浏览 7提问于2014-03-21得票数 0
2回答
试图在div中移动一些Nav链接，但它们没有响应。有人能在这方面提供任何帮助吗？利润率最高似乎什么都没做。新来的CSS。
CSS
#nav {
height: 70px;
vw: 100%;
background-color: hsla(0, 0%, 83%, .7);
margin-left: -10px;
margin-top: -16px;
margin-right: -10px;
border-bottom: 1px black solid;
}
li {
list-style-type: none;
displ
浏览 1提问于2013-11-12得票数 0
回答已采纳
1回答
所以基本上，我已经创建了一个选择，我想要解决这个问题。我设法做到了，但它不是中心的。我尝试过在CSS文件中使用页边距-左:auto；&margin右:auto；但是没有运气。似乎也没用..。
代码：
#fixedmarq {
position:fixed;
margin-left:auto;
margin-right: auto;
}
HTML代码：
<div id="fixedmarq"><marquee width="500" bgcolor="#000000"><span style="f
浏览 2提问于2014-02-20得票数 0
回答已采纳
4回答
我正在尝试编码盒子和胡须图形在html中。问题是，我在div (如Box)周围有边框，但当覆盖包含带状彩色图像的前一层时，这些边框会消失。这里的首选是不使用背景图像(或颜色)，如果可以避免的话。
html为：
<table cellspacing="0" cellpadding="0" id="BoxAndWhiskers" width="100%">
<tr class="graphArea">
<td><div class="graphColors"&g
浏览 15提问于2009-05-07得票数 6
回答已采纳
我对HTML有一个问题。
#content div无法获得宽度。
div test居中，#菜单应该有15%的宽度和#info to。
我试过了:两者都有；但它不起作用...
也许这是一个100%宽度的问题。
<!doctype html>
<html>
<head>
<style>
html, body {
height: 100%;
}
body {
margin: 0px;
overflow: hidden;
}
#wrapper {
background-color: green;
widt
浏览 2提问于2013-09-08得票数 0
我需要把我的形象放在中间，但这不是出于某种原因。
我的HTML代码：
<div class="face-img">
<img id="profile-img" src="http://host2post.com/server13/photos/jI7X5kXAIEk_4M~/1680x1050-lake-tahoe-california-desktop-wallpaper-background.jpg" />
</div>
和我的CSS代码：
.face-img{
display: inline-b
浏览 0提问于2015-04-02得票数 1
1回答
我已经尽可能地简化了代码，但是仍然不能把它集中起来。我相信我在CSS方面的缺乏经验并不能让我看到一些极其简单的东西。
如果有人也知道一些css的好资源，那就太好了。我读过许多CSS书籍的章节，但都是非常基础的，并且涵盖了相同的内容。
CSS标记：
/* MAIN ––––––––––––––––––––– */
html {
/* overflow-y:scroll; */
}
body {
/* margin:0; */
/* position:relative; */
}
/* Form ––––––––––––––––––––– */
#form {
ma
浏览 2提问于2013-05-28得票数 10
回答已采纳
在我的代码中，我设置了所有span标签的样式，并且在所有标签中都可以正常使用空白键，但是空白键根本不起作用。这种情况经常发生在我身上，所以我想问一下我是否对span tag有什么误解。请帮帮我！
<div id="header">
<span id="logospan" style="margin-left: 30px; margin-top: 8px;"> <img src="logo.png" width="70px" height="70px"> &
浏览 0提问于2016-12-08得票数 0
我希望你们一切都好。我使用的代码，我从Codepen，很多人可能会遇到这一点，我试图使用这段代码作为导航菜单，文本作为链接到节/页。文本对齐不对。请记住，我仍然是新的HTML和CSS和探索代码，以创建可用的网站。我知道文本容器需要一个锚链接才能成为菜单--这不是问题。我真的很感激你的时间。
代码: HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-
浏览 4提问于2021-09-23得票数 0
回答已采纳
我的一个类名为read-more的标签在名为文章文本的Div中，不知何故，页边距顶部无法工作，为什么会发生这种情况？
当我检查它时，似乎有一个页边距-顶部，但它似乎A标签是在流的html
这是我的代码的链接:
CSS
#Article {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 5rem 10rem 5rem;
}
.article-cards-wrapper {
display: flex;
justify-co
浏览 0提问于2021-05-23得票数 1
1回答
我想将margin-top设置为<small>标记。换句话说，我怎样才能用上面的元素来增加<small>标签的空间？
注意：我可以使用line-height来增加空间，但我只想从顶部设置空间，而不是从顶部和底部设置空间。
small{
margin-top: 100px;
color: #999;
}
<div>It is a test<div>
<small>this need to some margin-top</small>
我怎么能这么做？
浏览 0提问于2015-11-14得票数 4
回答已采纳
1回答
不知道为什么我的div元素没有跨越波旁网格的全部宽度。这个过程只发生在最后两个div上。见图像。为什么它会这样表现？在上也遇到了类似的问题。为什么div元素没有占据整个网格呢？
<div class="main-container">
<div class="articles">
<article></article>
<article></article>
<article>&l
浏览 0提问于2016-06-04得票数 0
我知道"margin: 0 auto“+ "display: block”可以使div或img等元素居中，但我不能理解它背后的逻辑。我们要说的是: 1.元素与“外部”的边界之间没有空格。2.你“抓住”了所有的线。
我真的不明白为什么它会将元素居中。
谢谢！
浏览 0提问于2019-09-30得票数 0
2回答
我对margin:0 auto;有一个问题，我很确定解决方案很简单，但我只是做错了一些事情。这是我自己创建的第一个网站，我在不同的区块中遇到了一些问题。
第一个问题是，内容没有居中，它是h2选择器类和文章类的父类。margin:0 auto;什么也没做。我将margin:0 auto;添加到content h2中，它就开始工作了。我很难解释它，因为我还没有完全理解它。我拿到了这个：
content {
width:auto;
max-width:1360px;
margin:0 auto;
}
content h2 {
width:auto;
m
浏览 2提问于2013-09-09得票数 2
回答已采纳
3回答
定心div id
、、
我有一个保存背景图像的div id。图像是1020 to宽，这正是我想要的div框有多大。我想在标题下面的页面上居中，但我不希望表格或其中的任何文本居中。我认为我可以为div id中的表和其他元素创建div id/class，以使它们以不同的方式对齐，但我仍然无法将div id放在中心。我已经尝试过文本对齐: center属性，但是我没有任何运气。
这是我的CSS：
@charset "utf-8";
/* CSS Document */
body {
background:url(img/background_texture.jpg) no-repeat cente
浏览 3提问于2014-01-28得票数 0
回答已采纳
2回答
为什么div显示属性inline-block将段落移动到左，该段落由margin:0 auto居中，没有显示属性。
.content
{
padding: 20px;
margin: 0 auto;
display: inline-block;
width: 900px;
height: 2000px;
}
content是div的类id，其中包含一些段落。当我添加display: inline-block时，段落移动到左侧。为什么会这样呢？
浏览 2提问于2016-06-08得票数 2
回答已采纳
我对Firefox中的DIV垂直对齐有问题
HTML代码是：
<div class="mess"><div class="rpl"><img src="img/16.png" width="16" height="16" border="0"></div><div class="pic"><img src="img/1.png" width="100" height="100&#
浏览 4提问于2010-03-28得票数 0
1回答
我目前被卡住了，因为我试图在页面中对图像进行居中。这是我有的东西
HTML
<div class="bg-container">
<img alt="Background" class="random bgimg">
</div>
CSS
.bgimg{
max-height: 640px;
width: 1920px;
clip: auto;
}
.bg-container{
overflow-x: hidden;
}
注意: img标记中没有src属性，因为我使用随机类通过JavaScript
浏览 0提问于2014-04-26得票数 0
回答已采纳
4回答
我知道这个问题已经问过很多次了，但是没有一个答案对我有用。我正在用HTML5和CSS3.0编写代码。我试图在一个页面中居中一个div标签，其中包含三个链接到其他图片的缩略图。我想让这些图片坐在一起，边距为0(这样它们就可以互相触摸)。下面是我的html代码：
<div id="main">
<h1>hello</h1>
<div id="gallery">
<a class="trigger" href="images/fulls/01.jpg"
浏览 2提问于2013-08-16得票数 1
回答已采纳
/*
Project Name: Monthly Resolutions
Client: One Month
Author: Christopher Castig | @castig
*/
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */
font-family: 'Lato', sans-s
浏览 15提问于2022-03-21得票数 0
1回答
在我的标题中，我希望在屏幕中心有一个圆圈，在左边的h1标签上，我的名字与它一起缩放。我试着用它来使用柔性盒，但是如果我尝试使用justify-self: center，我就找不到一种方法来对圆圈进行居中，但是它不能工作，我也不知道我做错了什么。
我试着使用利润率: auto，但是如果我尝试它的话，它不会对我的配置文件图片进行居中，类名妨碍了页边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="vi
浏览 0提问于2018-03-12得票数 1
回答已采纳
2回答
我在这里看过W3Schools和几个线程，不管我做什么，这些图像链接都不会集中在它们的元素中。我不能把它变小，因为桌子下面的一些图像几乎不适合它们的细胞。我想两个中心水平，垂直的图像和我看到的任何地方，以下是如何它是怎么做的(好的。水平的。我想，一旦我把这件事弄清楚了，我就会解决垂直对中的问题。
margin-left:auto;
margin-right:auto;
width: (some pixellage amount)
由于某些原因，这在我的html/css中不起作用。这里是一个链接，我试图居中，和css代码引用它。
<table class = "displayTa
浏览 1提问于2014-05-01得票数 0
回答已采纳
1回答
Div标签/背景不居中
、、、
我正处于构建我们网站的移动版本的早期阶段，并且我已经遇到了div标签的问题&背景没有居中。样式表代码如下：
<!DOCTYPE html>
<html><head>
<style type="text/css">
BODY{margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px; background-color:#fff;FONT-SIZE:12px;COLOR:#000000;FONT-FAMILY:Arial, Helvetica,
浏览 1提问于2012-01-17得票数 0
回答已采纳
嗨，我正试着在div中对4幅图像进行居中。如你所见，他们被困在左边。
我希望他们是完美的中锋，至少在他们周围有5-10%的保证金(稍微向右移动)。我只关注这个部分，about...not站点的其余部分。谢谢。我的html是：
<section id="slide-6" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<!-- <div class
浏览 7提问于2015-04-02得票数 1
回答已采纳
3回答
基本上，我想让我的td在水平方向上彼此分开。在火狐中，通过设置边距可以很好地工作，但边距在chrome中不起作用。因此，我尝试了以下方法，并将其应用于表
border-spacing: 40px;
border-collapse: separate;
此外，这个解决方案在chrome上有效，但在火狐上不起作用；尽管指南建议我需要单独的border-collapse:才能在火狐上工作。
下面是表格样式(适用于Firefox)的代码，没有更多细节：
#tstyle3 {
margin: 10px 0 0 0px;
width: 750px;
border-collapse:
浏览 4提问于2013-02-08得票数 0
回答已采纳
这是我的
当我使用Chrome工具检查锚标签的大小时，它显示了第一个元素的144px*18px和第二个元素的310px*18px。
我想知道为什么它不接受包含元素的高度和宽度，以及它是如何计算的。
.gallery {
background-color: #abcdef;
}
.gallery img {
display: inline-block;
margin-left: 20px;
margin-top: 20px;
}
.normal {
height: 160px;
width: 110px;
border: 5px sol
浏览 9提问于2013-09-03得票数 68
回答已采纳
4回答
我正在尝试设置一个在另一个div中居中的div。
这是html页面：
<body>
<div id="divParent">
<div id="divHeader" >
<div id="divHeaderText">
</div>
</div>
<div id="divBody">
</div>
</div>
</body>
这就是风格：
#div
浏览 0提问于2010-01-15得票数 1
回答已采纳
1回答
固定标题与下面的内容重叠
、、、、
我有下面的HTML，
header {
background: #f6f6f6;
width: 100%;
min-height: 120px;
position: fixed;
z-index: 100;
top: 0;
padding: 5px 0;
}
<header>
<div class="container">
<div class="row">
<a href="index.html">
<img src=&
浏览 0提问于2016-02-19得票数 0
我正在尝试编写一个符合HTML5的文档，该文档将通过W3C验证器：。
验证器抱怨标签的每次使用，并建议我使用CSS。不幸的是，CSS似乎不能将块水平居中。它可以使用' text -align: center‘属性将文本居中，但尝试居中表格和图像会失败。
我在上读过"CSS居中指南“，但它的所有示例都不能水平居中表格或图像(至少在Firefox36.0上是这样)。谁能建议一下如何使这张桌子居中？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" co
浏览 1提问于2015-04-02得票数 2
我有一些列表项内的模式，我希望每个列表项之间有相同的空间或magin。所以我使用了下边距: 1rem和右边距: 1rem，但它不起作用。例如，在较大的设备中，我希望有3列，但它只显示了两列，中间有非常大的边距。同样在中型设备中，我想要2列，但列表项之间的右边距和底部边距相同，但它不起作用，列之间的边距非常大。
Html：
<a data-toggle="modal" data-target=".bd-example-modal-lg" href="">Open <i class="fa fa-caret-down
浏览 1提问于2017-09-15得票数 0
我正在尝试设置我的示例代码，这样第二行在顶部就不会太拥挤。我不能将它们分成两行，所以我需要一种方法在每个div的顶部添加某种类型的填充，以便有一些喘息的空间。
下面是我尝试过的代码，我还添加了一个
HTML：
<div class="container">
<div class="item red">TEXT</div>
<div class="item red">TEXT</div>
<div class="item red">
浏览 0提问于2013-05-16得票数 0
回答已采纳
3回答
好了，在我的主页http://www.stat-me.com上，我有一个链接，当按下这个链接时，它会激活一些jquery。
我的css上面写着margin-bottom:517px;，但它不会影响它
它是带有文本XXXXXXXXXXXX的链接，如果您转到实际的页面，您将看到它位于左下角的透明条下面
对不起，因为我是一个新用户，我不能发布代码，因为它有超链接，但您可以转到上面的链接，并单击查看源代码，您将看到它。
基本上，如果您单击新闻提要，那么在单击XXXXXXXXX链接后，登录脚本就会出现这种情况
<?php
session_start();
if (isset($_SESSION[
浏览 5提问于2010-06-24得票数 2
回答已采纳
可能重复：
我有一个带有CSS类<div>的myclass。CSS类如下所示：
.myclass {
position: absolute;
width: 192px;
font-size: 11px;
background-color: #FFF;
padding: 15px 15px 0;
box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
-moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
-webkit-box-sh
浏览 6提问于2012-12-07得票数 6
回答已采纳
3回答
导航栏中间的徽标
、、、
在搜索过程中，我遇到了一些例子，但对于我来说--作为初学者--在实现这一点时，还不清楚最佳实践是什么。
我想要在我的导航栏的中间有两个链接到图像的中间，和两个居中的右边，这样我的4个链接，使标志的中心与4链接水平对齐。
供您参考：
HTML:
<body>
<nav class="menubar">
<div id= "navmenu">
<ul>
<li><a href="Info.html">Over ons</a&
浏览 3提问于2015-09-24得票数 0
回答已采纳
3回答
我有下面的超文本标记语言和CSS这里。我正在尝试将我所有的内容放在任何屏幕大小/浏览器的中心。目前，在我可以测试的所有屏幕上，所有东西都偏离中心并向左偏了一点。这是我的CSS ( HTML和CSS都在jsfiddle链接中)：
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
html{
/* font-family: 'Roboto Condensed', sans-serif;*/
font-family: "HelveticaNeue-Ligh
浏览 0提问于2014-02-09得票数 0
for (int i = 0; i < length; i++)
{
Image img1 ;
img1 = null;
img1= new Image();
img1.Height = snhei;
img1.Width = snwid;
BitmapImage BitImg = new BitmapImage(new Uri("/Assets/midtail.png", UriKind.Relative));`
img1.VerticalAlignment = VerticalAlignment.T
浏览 1提问于2014-06-13得票数 0
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
腾讯云开发者
