Blockquote Creating Unwanted Element

Code Feedback
1

Hiya,

Beginner working on the Tribute Page and there is a “grey bar” to the left of my blockquote and I’m not sure why. Here is the CodePen. Would appreciate some knowledge. Thanks!

2

Hello !

Most elements in HTML have default values when it comes to their appearance. Blockquotes do have some defaults, like this gray border.

In order to remove it, simply create a specification in CSS for it like so :

blockquote {
  border:none;
}

Hope it helps !

3

I ended up looking at the example FCC provides (Dr. Borlaug) to help me get started and the only CSS is the margin-top. They are using the blockquote and not getting the border. Just trying to understand how FCC laid it out. Thanks!

1 Like
4

Well this can be confusing, but yes, there is a border on the FCC example, but it’s the same color as the background-color, so nobody sees it.

This default as you see it, is specified by Bootstrap. You can easily override Bootstrap classes in your CSS.

1 Like
5

Interesting. Appreciate the insight.

6

One more question if you don’t mind, how come it only displays only the left border and not all 4 sides then?

7

Because in this case, only a left border has been specified :

border-left:5px solid #eee;

that way, there’s only a border on this side. You can use any other of theses properties too :

border to make a border on every sides
border-right, border-top and border-bottom

1 Like