CSS margin-right属性详解,设置右外边距

margin-right属性

CSS中,margin-right属性,可以用来设置HTML文档中元素的右外边距样式。如下实例:

<div class='x1'>
  <p class='y1'>内容</p>
</div>

<style>
  .x1{border:1px solid Tomato;width:100%;height:100%;}
  .y1{border:1px solid skyblue;margin-right:5%;}
</style>

margin-right属性“不起作用”的问题

当遇到div元素内嵌套div元素的时候,设置子元素div的margin-right有时候会不起作用,比如下面这个实例:

<div class='x1'>
  <div class='y1'>内容</div>
</div>

<style>
  .x1{border:1px solid Tomato;width:100%;height:100%;}
  .y1{width:100%;height:10%;border:1px solid green;margin-right:5%;}
</style>

margin-right不起作用的解决办法

将width属性去掉,除此之外,还需要在子元素内部添加内容,不管是div元素还是p元素,可以是文本,也可以是其它的子元素,然后内容需要有足够的长度,比如足够一行的长度,也可以为子元素添加background-color背景色,也可以添加边框border属性,比如下方的实例:

<div class='a'>
  <div class='b'><p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p></div>
  <div class='c'><p></p></div>
  <div class='d'><p></p></div>
</div>

<style>
  .a{border:1px solid Tomato;width:100%;height:100%;}
  .b{margin-right:5%;}
  .c{border:1px solid green;margin-right:10%;}
  .d{background-color:skyblue;height:20px;margin-right:15%;}
</style>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.