Vue Element-Ui Container layout container

Learning vue+elementUi in the preliminary learning layout I don"t know why < el-aside > has margin

Thank you, bosses

the code is as follows:

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.el-header,
.el-footer {
  background-color: -sharpb3c0d1;
  color: -sharp333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: -sharpd3dce6;
  color: -sharp333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: -sharpe9eef3;
  color: -sharp333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

the effect is as follows

Mar.30,2021

the watch is heavy. Ask the great god to explain.


the watch sinks. Ask the great god to explain.


introduce normalize.css


this should be provided by the browser. Under your entry page settings, margin:0


Brother, has this problem been solved?

Menu