How to indent a DIV?

wrap it in another div. make the outer div margin: 0 auto; and the inner div margin-left: 50px

.outer {
  width: 200px;
  margin: 0 auto;
  background-color: yellow;
}

.inner {
  margin-left: 50px;
  background-color: orange;
}
<div class="outer">
  <div class="inner">
    hello world
  </div>
</div>


<html>
<head>
    <title>Test</title>
    <style>
        #outer {
            margin: 0 auto; /*center*/
            width:200px;
            background-color:red; /*just to display the example*/
        }

        #inner {
            /*move the whole container 50px to the left side*/
            margin-left:-50px; 
            margin-right:50px;
            /*or move the whole container 50px to the right side*/
            /*
            margin-left:50px; 
            margin-right:-50px;
            */
        }
    </style>
</head>
<body>
<div id="outer">
    <div id="inner">
        This is the result!
    </div>
</div>
</body>
</html>

try

padding-left: 50px;

and if that doesn't suffice keep the padding and ad another div inside the bigger one.

Tags:

Html

Css

Indentation

Recent Posts