Here is the thing: I want to cut unnecessary border, ive been searching for solutions all day long, but there is no proper answer on how to do it…anyone?
Note that <h2> is a block element, which by default always spans the width of its container, hence the “unnecessary” borders.
How about reducing the width of the <h2>, say with width: 50%; or so?
If i do that (change width to 50%, the border jumps on the left side…Yes it does cut the unnecessary borders, but it doesnt stay in the middle.
I forgot to mention centering with margin-left: auto; and margin-right: auto;
Or if you really want the border to be around the text, why not wrap the text in a <span>, and give that <span> the borders?
<!-- Use classes if need be -->
<h2><span>center</span></h2>
h2 {
text-align: center;
}
span {
border: 5px double;
display: inline-block; /* this property might be necessary */
}
HTML file contains a section known as the ‘body’. Enclosed by an opening and closing tag () the body should contain all the content that is visible to the user. If you’re seeing a border around the edge of your site it’s because this body section has a default margin around the outside of about 10 pixels.
OK, so now we know why we have this gap, how do we get rid of it? The answer is simple. Using CSS we need to remove this margin, or in other words, set it to zero pixels. A very simple example of this can be seen in the picture
:
That’s off-topic, don’t you think? OP was asking about an element’s borders, not reducing the page’s margins