span标签设置左右边距

要设置span标签的左右边距，可以使用CSS的margin属性。例如，将span标签的左右边距都设置为10像素，可以使用以下CSS代码：

span {
  margin-left: 10px;
  margin-right: 10px;
}

此外，还可以使用margin属性的缩写形式来设置左右边距，例如：

span {
  margin: 0 10px;
}

这样就会将span标签的上下边距设置为0，左右边距都设置为10像素。

相关问题

题目要求 在 style 标签中按如下要求设置样式 1、id 为bk 的 div元素:背景颜色(#f5f5f5)、下边框(1px、实线、#000000)、边框颜色(#cdcdcd)。(注：先设置下边框，再设置整体边框颜色) 2、id 为 topic 的 div元素:宽度(900px)、外边距(上下外边距0px,左右自适应)、内边距(5px)。 3、id 为title 的p元素:字号(40px)、字体(中宋)、字体粗细(bolder)、宽度(900px) 。 4、id 为 source2的 span 元素:字号(13px)、文本颜色(#ababab)。 5、id 为content 的 div元素:宽度(650px)、外边距(上下外边距0px,左右自适应)、右边框(1px、实线、#efefef)、右内边距(10px)。 6、id 为 feedback 的 p 元素:字号(13px)、文本颜色(#ababab)、占对齐。 7、hr :高度(1px)、无边框、背景颜色(#cdcdcd)。

请按照以下代码设置样式：

<style>
  #bk {
    background-color: #f5f5f5;
    border-bottom: 1px solid #000000;
    border-color: #cdcdcd;
  }
  #topic {
    width: 900px;
    margin: 0px auto;
    padding: 5px;
  }
  #title p {
    font-size: 40px;
    font-family: "中宋";
    font-weight: bolder;
    width: 900px;
  }
  #source2 {
    font-size: 13px;
    color: #ababab;
  }
  #content {
    width: 650px;
    margin: 0px auto;
    border-right: 1px solid #efefef;
    padding-right: 10px;
  }
  #feedback p {
    font-size: 13px;
    color: #ababab;
    text-align: right;
  }
  hr {
    height: 1px;
    border: none;
    background-color: #cdcdcd;
  }
</style>

1）3个主要盒子自动居中，盒子宽1000px；header，bottom盒子高100px，背景颜色浅灰； （2）header中的图片：宽300px，圆角，设置合适的外边距； （3）文字：红色，幼圆，修改margin值为2px，首行缩进； （4）section中每组图片的外边距为上下50px，左右20px；每行显示两组图片，用<br>标签换行，注意修改元素类型为行内块。 （5）设置section下组1中span标签为行内块，宽高140px*140px，圆形，背景颜色darkyan，框线为白色5px双实线 （6）各自设置背景图片，调整图片的大小，位置。 （7）组2中的图片：宽146px，黑色2px的点线，背景色白色。 （8）对bottom中的图片设置合适的宽、外边距及边框。

以下是对应代码：

<style>
    /* 盒子居中 */
    .container {
        width: 1000px;
        margin: 0 auto;
    }
    /* 头部样式 */
    header {
        height: 100px;
        background-color: #f2f2f2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
    }
    header img {
        width: 300px;
        border-radius: 50%;
        margin-right: 20px;
    }
    header p {
        font-family: 幼圆;
        font-size: 16px;
        color: red;
        margin: 2px 0 0 2px;
        text-indent: 2em;
    }
    /* 主体内容样式 */
    section {
        margin-top: 50px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .box {
        width: 460px;
    }
    .box img {
        width: 100%;
    }
    .box:nth-child(odd) {
        margin-right: 20px;
    }
    .box:nth-child(even) {
        margin-left: 20px;
    }
    /* 组1中span标签样式 */
    .box1 span {
        display: inline-block;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background-color: darkcyan;
        border: 5px double white;
        overflow: hidden;
    }
    .box1 span img {
        width: 100%;
    }
    /* 组2中图片样式 */
    .box2 img {
        width: 146px;
        border: 2px dotted black;
        background-color: white;
        margin-bottom: 50px;
    }
    /* 底部样式 */
    footer {
        height: 100px;
        background-color: #f2f2f2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    footer img {
        width: 200px;
        margin: 0 20px;
        border: 2px solid black;
        border-radius: 50%;
    }
</style>

<div class="container">
    <header>
        <img src="header.jpg" alt="header">
        <p>这是一段红色的幼圆字体的文字，设置了2px的边距和首行缩进</p>
    </header>
    <section>
        <div class="box box1">
            <span><img src="box1.jpg" alt=""></span>
            <img src="box2.jpg" alt="">
        </div>
        <div class="box box2">
            <img src="box3.jpg" alt="">
            <img src="box4.jpg" alt="">
            <img src="box5.jpg" alt="">
        </div>
        <div class="box box1">
            <span><img src="box6.jpg" alt=""></span>
            <img src="box7.jpg" alt="">
        </div>
    </section>
    <footer>
        <img src="footer1.jpg" alt="">
        <img src="footer2.jpg" alt="">
        <img src="footer3.jpg" alt="">
    </footer>
</div>