Padding Left and Right with text

HTML-CSS
1

In the below CSS class, Even when I have not entered any padding, it shows left and right padding around the text. Can someone please explain this behavior.

<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}

.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}

.yellow-box {
background-color: yellow;
padding: 10px;
}

.red-box {
background-color: crimson;
color: #fff;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
}

.blue-box {
background-color: blue;
color: #fff;
/* padding: 40px 20px 20px 40px; */
}
</style>

![question|690x236](upload://9uSN0dIS881iOXKmAKzdkrBY2oT.png)
2

I believe that the width of header elements is 100%.

3

Can you show the rest of the css.

4

I am not too sure which box you are referring to. The red one?

5

There isn’t any padding on it. The .blue-box element is a <h5> which is a block-level element and will span the width of it’s parent container. It also has some default top/bottom margin. The reason why it isn’t spanning all the way to the edge is the 10px padding on the parent container .yellow-box.

The challenge (I assume)

Your image

question
question804×276 15.8 KB

2 Likes
6

I am talking about the blue box. For some reason output picture is not showing. I am going to try to add the output picture.