css边距,高度宽度

使用单独的外边距属性

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h1>使用单独的外边距属性</h1>

<div>这个 div 元素的上外边距为 100 像素，右外边距是 150 像素，下外边距是 100 像素，左外边距是 80 像素。</div>

</body>
</html>

 

当然，也可以将margin设置为anto属性，这样在容器中，元素将自动居中

 

使用内边距属性

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>

<h1>使用单独的内边距属性</h1>

<div>这个 div 元素的上内边距是 50px，右内边距是 30px，下内边距是 50px，左内边距是 80px。</div>

</body>
</html>

 

设置元素的高度，宽度

<!DOCTYPE html>
<html>
<head>
<style>
img.one {
  height: auto;
}

img.two {
  height: 200px;
  width: 200px;
}

div.three {
  height: 300px;
  width: 300px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h1>设置元素的高度和宽度</h1>

<p>原始图像：</p>
<img class="one" src="\Tefuir\Pictures\图片\微信图片_20210507211613.jpg" width="300" height="300"><br>

<p>尺寸调整后的图像 (200x200 像素)：</p>
<img class="two" src="\Tefuir\Pictures\图片\微信图片_20210507211613.jpg" width="300" height="300"><br> 

<p>这个 div 的高度和宽度是 300px：</p> <div class="three">
</div> 

</body> 

</html>

 

posted @ 2022-02-06 23:01  kuaiquxie  阅读(62)  评论(0)  编辑  收藏  举报