What is the best way to bring the borders closer to the text on both sides?

Is there a way to adjust the padding on the left and right side of my Autumn outfits header so that it sits closer to the text? I've already tried setting padding-left and padding-right to 2px, but the element remains unchanged.

Below is a snippet of my code:

.outfitsbuttonsheadings {
padding-left: 2px;
padding-right: 2px;
border: 2px solid black;
text-align: center;
font-family:'Mali', cursive;
<h3 class="outfitsbuttonsheadings">Autumn outfits</h3>

P.S. - As a newbie on Stack Overflow, any tips on how to improve the way I ask questions would be greatly appreciated after this query has been addressed.

htmlcss

Answer №1

The h3 tag functions as a block-level element that spans the width of the line.

To ensure the border tightly wraps around the text, you can utilize a span. The following CSS styles define the classes for span and h3 individually.

span.outfitsbuttonsheadings {
    padding-left: 2px;
    padding-right: 2px;
    border: 2px solid black;
    font-family:'Mali', cursive;
}
  
h3.outfitsbuttonsheadings {
    text-align: center; /* centers text within the h3 element */
}
<h3 class="outfitsbuttonsheadings">
  <span class="outfitsbuttonsheadings">Autumn outfits</span>
</h3>

Answer №2

If you want the H3 element to be displayed as an inline-block, keep in mind that it won't allow block elements to be on the same line with the header:

.outfitsbuttonsheadings {
  display: inline-block;
  padding-left: 2px;
  padding-right: 2px;
  border: 2px solid black;
  text-align: center;
  font-family: 'Mali', cursive;
}
<h3 class="outfitsbuttonsheadings">Autumn outfits</h3>
<span>rest of the text</span>

Alternatively, you can set the width to fit-content. This will maintain the block display, but note that it's not universally supported by all browsers:

.outfitsbuttonsheadings {
  width: fit-content;
  padding-left: 2px;
  padding-right: 2px;
  border: 2px solid black;
  text-align: center;
  font-family: 'Mali', cursive;
}
<h3 class="outfitsbuttonsheadings">Autumn outfits</h3>
<span>rest of the text</span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve data from a text file using ajax and then return the string to an HTML document

Just starting out with ajax, I have a text file containing number values For example, in ids.txt, 12345 maps to 54321 12345,54321 23456,65432 34567,76543 45678,87654 56789,98765 Here is the Html code snippet I am using <html><body> < ...

javascriptjqueryhtmlajax

Merging the Select and Input elements side by side using Bootstrap grid system

Is there a way to combine all form group items like Select and Input using only the bootstrap framework? I attempted the method below, but there is an extra space between the Select and Input Box. Check out the DEMO ...

csstwitter-bootstrap

There seems to be an unidentified issue causing my carousel to malfunction

I'm currently experiencing an issue with the carousel on my Angular web application that is not functioning as expected. I am unable to determine the root cause of this problem -- here's my code <div id="section1" class="carousel slide" ...

htmlangularjscarousel

Circular containers with text and subtitles arranged in a vertical alignment

I am struggling to find a solution for what seems like a simple task. I want to create 5 circular divs, each containing a letter grade with the subject title below it. Here is what I have tried so far: HTML: <div class="subject">A</div> <d ...

htmlcssweb

Icon overlapping text from Font Awesome

Although my contact form is working well, I have noticed that the text in the message area tends to overlap with the icon as more content is added. Initially, everything aligns perfectly, but as the text extends, it ends up overlapping with the icon. Can ...

htmlcssbootstrap-4

Tips for adding color to the <td> element in an ejs file using nodeJS

I am looking to incorporate a color into my .ejs file. Here is the code snippet I am working with: <% resultList.forEach(function(item, index){ %> <tr> <td><%= item.function %></td> <td><%= item.value %>< ...

javascripthtmlcssnode.jsejs

Establish a Zebra DataList Chart

My first task is to connect a Table from the database so that each row is editable. After some research, I settled on using the DataList due to its <EditItemTemplate> property, which the repeater lacks. To create a Zebra table, I crafted a CSS class ...

asp.netcssdatalist

Is the value "_new" accepted in the target= attribute in HTML5?

After much consideration, I made the choice to switch from using _blank to _new in order to minimize bombarding users with new windows. My goal is to have just one 'new window' and have all links that open in a new window open in that pre-existin ...

html

Choose a random cell in Jquery every second

I am searching for a method to choose one div out of sixteen and change its CSS backgrounds. This selection needs to occur every second, so a new div is selected from the group each second. I am struggling with implementing the "every second" functionalit ...

javascriptjqueryhtml

Resizing tables dynamically using HTML and JavaScript

I am attempting to reproduce the functionality demonstrated in this example When dealing with a large table, I want it to resize to display 10 entries and paginate them accordingly. The only thing I require is the pagination feature without the search bar ...

javascriptjqueryhtmldatatableshtml-table

Enhancing your design with animated borders on hover

This unique border animation caught my eye and sparked my curiosity. I'm interested to know if it can be achieved using only HTML5/CSS for a hover effect. Have you discovered any other visually appealing hover animations worth mentioning? ...

htmlcss

Issues with displaying nested HTML tables properly

Struggling to set up a system for Parent and Child rows in an HTML table. While the code is somewhat functional, my lack of JavaScript knowledge is causing issues with selecting elements correctly. When I click on the first parent row, only one child row a ...

javascripthtmlcss

How to center content vertically in a Bootstrap 5 column div

I assumed that aligning content vertically in a div should be easier compared to using a table: Edit: I want to align the first and last columns while keeping the others as they are. <link href="https://cdn.jsdelivr.net/npm/&l ...

htmlcsstwitter-bootstrapbootstrap-5

CSS styles not detected after device orientation change

I'm encountering an issue with my CSS styling for a layout in landscape mode on mobile devices. The styling works perfectly when the page is loaded in landscape mode, but if I load it in portrait mode and then change the orientation to landscape, the ...

css

I'm looking for recommendations on the best technologies to implement in a location-based mobile app. Any suggestions

Currently working on a server-side website tailored for mobile devices. My main objective is to create a member system where users can log in and share their geolocation data. Once logged in, the user's geolocation information will be stored in my dat ...

phpmysqlhtmlgeolocation

What happens when data is managed in getStaticProps and utilized in useEffect within a component?

On my page, I utilize the getStaticProps function to fetch a list of objects containing book titles, authors, and character lists. Each object is then displayed within a component that formats them into attractive pill-shaped elements. The component rende ...

htmlreactjsnext.js

Exploring the analysis of JavaScript and CSS coverage throughout various pages or websites

The Chrome Dev Tools JavaScript and CSS Coverage Drawer is quite impressive, but there is one thing that could make it even better. It would be great if it could remain active without restarting its analysis every time you visit a new page. I wish I could ...

javascriptcssgoogle-chrome-devtoolscode-coverage

Cannot render <Image> inside <Section> component

As a beginner in React, I am attempting to create an app following a tutorial. In my component, I utilized the figure tag but it's not showing up when inspecting element in Chrome. Here are the code snippets: The tutorial includes a div tag as a chil ...

javascripthtmlcssreactjs

Textarea with integrated checkbox

Can checkboxes be incorporated within a textarea using basic HTML and CSS? I'm aware that this can be achieved with tables, but I'm curious if it's possible within a textarea itself. ...

htmlcss

Show 1 Blog Post on a Separate AngularJS Page

I would like to show only Test Post 1 on the next HTML page titleDetails.html when the user clicks on Test Post 1 in index.html 1) titleDetails() in index.html: <a ng-click="titleDetails(post)">{{ post.title }} </a> 2) Controller Variables a ...

javascripthtmlangularjs