Question 231454 in Html Question posted in
Some basic documentation can be found here.

Html – Padding and inner borders

Basically, I have to boxes, one into another. For the outer box, I set all of its inner text to have a padding of 10px, but somehow the inner box border doesn’t respect this rule.

.plan {
    display: block;
    margin: 20px 20%;
    width: auto;
    border: 2px solid;
    border-radius: 5px;
}

.plan * {
    text-decoration: none;
    padding: 0px 10px;
}

.plan * .description {
    border: 2px solid black;
}

Isn’t there a way to force the inner border to start 10px right from the outer border?

Tags:

2

Answers


  1. 0 
    .plan {
    display: block;
    margin: 20px 20%;
    width: auto;
    border: 2px solid;
    border-radius: 5px;
    padding-right: 10px; /* İçeriğin sağ tarafına 10px boşluk ekler */
    box-sizing: border-box; /* İçeriğin kutu modelini sınırlar */
}

.plan * {
    text-decoration: none;
    padding: 0px 10px;
}

.plan .description {
    border: 2px solid black;
    margin-right: 10px; /* İç kenarlığı dış sınırdan 10px sağda başlatır */
}

    In the above code snippet, the padding-right property is used to add a 10-pixel space to the right of the content of the .plan class, and the .description class is given a margin-right property to start the inner margin 10 pixels to the right of the outer border. Additionally, the use of box-sizing: border-box; helps constrain the content and borders within the width of the outer box.

    With these adjustments, I hope this helps you achieve the goal of creating a 10-pixel margin inside the outer box for the content of the inner box.

    Login or Signup to reply.
  2. 0

    Add padding-right: 10px; to the outer box and * {box-sizing: border-box;} in your CSS. Thank you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search