Measurement of the border's internal thickness of a button

I want to create a button with an internal border that doesn't affect the spacing of other elements.

When I increase the size of the button border, I need it to remain contained within the button itself.

HTML:

<div class="text1">Some text 1</div>
<button class="button">Button</button>
<div class="text2">Some text 2</div>

CSS:

.text1,
.text2,
.button {
    display:inline;
}
.text1,
.text2 {
    padding:2px;
    border:1px solid black;
}
button {
    background-image:none;
    border:4px solid blue;
}

https://jsfiddle.net/ow67a8o6/

Answer №1

Ensure the box-sizing is set to border-box
for optimal results.

It's generally recommended to use inline-block instead of inline, but the choice depends on your specific scenario.

.text1,
.text2,
.button {
  display: inline-block;
}
.text1,
.text2 {
  padding: 2px;
  border: 1px solid black;
}
button {
  background-image: none;
  border: 4px solid blue;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
<div class="text1">Some text 1</div>
<button class="button">Button</button>
<div class="text2">Some text 2</div>

Alternatively,

Avoid using borders and instead use an inset box-shadow.

.text1,
.text2,
.button {
  display: inline-block;
  padding: 12px;
  border: 1px solid black;
}
button {
  background-image: none;
  box-shadow: inset 0 0 0 2px blue;
  border: none;
}
button:hover {
  box-shadow: inset 0 0 0 4px blue;
}
<div class="text1">Some text 1</div>
<button class="button">Button</button>
<div class="text2">Some text 2</div>

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

Enhance the HTML content using a JavaScript function

Here is the code that I have: <label>Brand</label></br> <select name="brand" id="brand" onChange="changecat(this.value);"> <option value="" selected>Select Brand</option> <option value="A">AMD</option&g ...

Implement the color codes specified in the AngularJS file into the SASS file

Once the user logs in, I retrieve a color code that is stored in localstorage and use it throughout the application. However, the challenge lies in replacing this color code in the SASS file. $Primary-color:#491e6a; $Secondary-color:#e5673a; $button-color ...

Using HTML or JavaScript to generate a multitude of identical HTML elements on a webpage

I am currently designing a page that requires the presence of numerous tree illustrations with leaves, spanning across the width at the bottom of the page. I have considered two methods to achieve this. One option is to create a single set of trees and lea ...

Encountered a MySQL error while attempting to insert an image into the database

I have a task to work on a website where users can upload product images that will be stored in a MySQL database. The code for my HTML form is: <FORM action="testimage1.php" ENCTYPE="multipart/form-data" method="post"> <div st ...

Tips for styling your Angular Material Card on mobile devices

Currently, I am very happy with my desktop layout which looks like this: https://i.stack.imgur.com/tG0pw.png However, when it comes to the mobile version of my site, here is what I have so far: https://i.stack.imgur.com/KD1hh.jpg While I do like the ho ...

Having trouble retrieving the value of an HTML input field using form.value in Angular 5?

I am currently working with Angular 5 Within my HTML, I am dynamically populating the value of an input field using: <input type="number" class="form-control" id="unitCost" name="unitCost" [(ngModel)]="unitCost" placeholder="Average Unit Price"> ...

Text in d3.js vanishing while undergoing rotation

I have been struggling for hours with what seems like a simple problem and haven't made any progress. I'm hoping to receive some valuable advice from the brilliant minds on stackoverflow. You can view my demo at I attempted to use jsfiddle to s ...

Using AngularJs to have two ui-views on a single page

As a beginner in AngularJs, I encountered an issue with having two ui-views on the same page. When I click a button to show the view for goals, both the form for goals appear in ui-view 1 and ui-view 2 simultaneously. I have been working with states but I ...

Troubleshooting Vue 3 Options API custom element with non-functional Bootstrap js files

Having trouble incorporating Bootstrap 5 into a Vue 3 Options Api custom element? Check out my setup below: import { defineCustomElement } from 'vue' import 'bootstrap/dist/js/bootstrap.bundle' import App from './App.ce.vue' ...

When buttons are clicked within Angular Material's Card component, it automatically triggers the click event of the card itself

One of the challenges I'm facing is having a mat-card within a component template: <mat-card *ngFor="let p of products" (click)="viewProduct(p)"> <mat-card-actions> <button mat-stroked-button (click)="addProductToCart(p)"&g ...

How can a variable value be implemented in HTML style within Jinjia2?

Wondering how to dynamically position a small image on a web page based on a variable value? For instance, if the v_position variable is set at 50, you want the image to be centered horizontally. And if it's set at 100, the image should display at the ...

Text located incorrectly beside image within container box

Below is the HTML code that defines a box containing title text and an image. <div id="about"> <div id="title"> <h3><b>About</b></h3></div> <div id="text"><p>Text</p></div> <div id="img ...

Differences in Changing Div Background Between Firefox and Chrome

My webpage has a div element that I want to be able to change the background color of by clicking on it. The background should either be transparent with no color, or a reddish/pinkish shade. I've written a javascript function to handle this function ...

What is the process for setting data to the value attribute in an input tag, retrieved from a firebase database?

I utilized the following code snippet to retrieve data from Firebase database and store it in the Name variable. var userId = localStorage.getItem('keyName'); var dbRefName = firebase.database().ref() .child(& ...

What other function can I combine with the foreach function?

I am working on populating the empty array named $Errors with specific items to enforce restrictions on my file upload form. My approach involves adding a <div> element as an item within the array, containing certain strings. I aim to concatenate t ...

Unable to align span vertically using font-style "Luckiest Guy" in CSS

I have encountered an issue with vertically centering a span using the font-style "Luckiest Guy". https://i.sstatic.net/Lz8o3.png I attempted to use display: flex;align-items: center; on the span, but it did not work. App.vue <template> <div ...

I'm encountering inexplicable duplications of elements on my Wordpress site

Here is an example of my template header: <header> <?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?> <a class="menu-toggle">menu</div> <?php wp_nav_menu( array('them ...

I am encountering an issue with opening a dropdown select option upon clicking in C# while using Selenium

I am encountering an issue while attempting to open the Register page from my account. The UI developer utilized Bootstrap code, and Bootstrap developers have included a JS function on click. However, when I execute this code, an error is thrown: "OpenQA.S ...

Searching for the precise draggable grid line position in rulerguides.js - tips and tricks!

Currently, I am utilizing rulerguides.js in my project. I have customized it for a specific div to display rulers and grid lines. You can refer to this FIDDLE. The rulers are functioning properly, but the draggable grid lines are being calculated based on ...

Establishing space between table rows

I need to create a specific margin between two rows in a table. In my css code, I have the following snippet: background-color: #72c2dd; margin-top: 25px; The background-color is being applied correctly, but the margin-top property is not working as int ...