What's causing the margin within the span.details to malfunction?

The text within the span.details element is not centered within a.prod-buy and a.prod_details. I would like to adjust the positioning of the words add to cart and book info slightly using margin: 2px 0 0 2px; in the span.details.
Why isn't it working?

div.center_prod_box {
    border:1px dashed black;
    float:left;
    width:173px;
    height:auto;
    text-align:center;
}

span.reduce {
    text-decoration:line-through;
}

div.prod_details_tab{
    clear:both;
    width:180;
    height:40px;
    border:1px solid red; 
}

a.prod_buy,a.prod_details {
    width:75px;
    height:24px;
    background:url(images/link_bg.gif) no-repeat center;   
    font-size:12px;
    margin:10px 10px 0 0;
    dispaly:block;
    float:left;
    border:1px solid red;
}

span.details {
    border:1px solid red;
    margin:2px 0 0 2px;
}
<html>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <body>
        <div class="prod_box">
            <div class="center_prod_box">
                <div class="product_title">
                    <p>book name</p>
                </div>
                <div class="product_img">
                    <img src="images/book1.jpg" />
                </div>
                <div class="prod_price">
                     <span class="reduce">&yen;36</span> <span class="price">&yen;31</span>
                </div>
            </div>
            <div class="prod_details_tab">
                <a class="prod_buy">
                    <span class="details">add to cart</span>
                </a>
                <a class="prod_details">
                    <span class="details">book info</span>
                </a>
            </div>
        </div>
    </body>
</html>

htmlcssmargin

Answer №1

To style the span element, include the CSS property display: inline-block.

div.center_prod_box {
    border:1px dashed black;
    float:left;
    width:173px;
    height:auto;
    text-align:center;
    }

span.reduce {
    text-decoration:line-through;
    }

div.prod_details_tab{
    clear:both;
    width:180;
    height:40px;
    border:1px solid red; 
    }

a.prod_buy,a.prod_details {
    width:75px;
    height:24px;
    background:url(images/link_bg.gif) no-repeat center;   
    font-size:12px;
    margin:10px 10px 0 0;
    dispaly:block;
    float:left;
    border:1px solid red;
    }

span.details {
    display: inline-block;
    border:1px solid red;
    margin:2px 0 0 2px;
    }
<html>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <body>
        <div class="prod_box">
            <div class="center_prod_box">
                <div class="product_title">
                    <p>book name</p>
                </div>
                <div class="product_img">
                    <img src="images/book1.jpg" />
                </div>
                <div class="prod_price">
                     <span class="reduce">&yen;36</span> <span class="price">&yen;31</span>
                </div>
            </div>
            <div class="prod_details_tab">
                <a class="prod_buy">
                    <span class="details">add to cart</span>
                </a>
                <a class="prod_details">
                    <span class="details">book info</span>
                </a>
            </div>
        </div>
    </body>
</html>

Answer №2

To adjust the text by 2px, apply padding-left to the span.

div.center_prod_box {
    border:1px dashed black;
    float:left;
    width:173px;
    height:auto;
    text-align:center;
    }

span.reduce {
    text-decoration:line-through;
    }

div.prod_details_tab{
    clear:both;
    width:180;
    height:40px;
    border:1px solid red; 
    }

a.prod_buy,a.prod_details {
    width:75px;
    height:24px;
    background:url(images/link_bg.gif) no-repeat center;   
    font-size:12px;
    margin:10px 10px 0 0;
    dispaly:block;
    float:left;
    border:1px solid red;
    }

span.details {
    border:1px solid red;
    margin:2px 0 0 2px;
    padding-left: 2px;
    }
<html>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
    <body>
        <div class="prod_box">
            <div class="center_prod_box">
                <div class="product_title">
                    <p>book name</p>
                </div>
                <div class="product_img">
                    <img src="images/book1.jpg" />
                </div>
                <div class="prod_price">
                     <span class="reduce">&yen;36</span> <span class="price">&yen;31</span>
                </div>
            </div>
            <div class="prod_details_tab">
                <a class="prod_buy">
                    <span class="details">add to cart</span>
                </a>
                <a class="prod_details">
                    <span class="details">book info</span>
                </a>
            </div>
        </div>
    </body>
</html>

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

Retrieving online content and updating it upon reestablishing internet connection

Currently, I am in the process of developing an app that will feature a substantial amount of web content. My plan is to use Phone Gap build for its release; however, I intend to host all the content online and link to it from within the app. I have been c ...

javascriptandroidhtmliosphonegap-build

The jQuery append function does not incorporate CSS styling

I am currently facing an issue where my jQuery code successfully appends a piece of HTML, but the CSS styles are not being applied to it after the append operation. What is the correct approach to resolve this? This is the method I am using: if(listone[ ...

jquerycss

Surround an embedded YouTube video with a styled DIV

I'm having an issue with embedding three YouTube videos on a page. I wrapped them in a DIV and gave them a CLASS of "videoplayer". However, the DIV and CLASS don't seem to be displaying on the page. To view the problem, check out: Below is the ...

cssyoutube

Eliminate the standard blue border that appears when control-clicking on table elements

I've encountered this question before, but unfortunately none of the solutions provided have worked for me. Some things I've attempted are: Using event.preventDefault() - did not produce the desired result. Removing user-select from CS ...

javascripthtmlcss

CSS: Child Div Fails to Override Parent Div

My current page's content header appears as follows: However, I am aiming for something like this instead: This is the HTML snippet related to that part of the page: <div class="header">My Tools<a href="#possess" class="anchor_link">Vie ...

csshtml

Send form data using ajax technology

When testing my code on localhost, everything runs smoothly. However, when I tried running it on the server, it doesn't seem to be functioning properly. $("#MyUploadForm").ajaxSubmit(options); I would greatly appreciate any assistance with t ...

htmlajax

Choose a Date from the Calendar and Modify the Link Text

I have a Link Label on my page that triggers a calendar pop-up when clicked. I want the label to update to the selected date in the format '30 JAN 2017' from the calendar. The issue lies with the local variable var dateText =...; although the la ...

javascriptjqueryhtmldatecalendar

What is the best way to create an element that is clickable but transparent in appearance?

Is there a way to achieve an inset box shadow on elements like an iframe without blocking clicks on the element itself? The common strategy of overlaying a div over the iframe achieves the desired visual effect but unfortunately hinders interaction with th ...

htmlcss

Is there a way to adjust the width of the datepicker on my device?

I've been attempting to adjust the width of the date picker, but I'm having trouble achieving it. Below is my code: import React from "react"; import ReactDOM from "react-dom"; import { DatePicker, RangeDatePicker } from &qu ...

javascriptcssreactjsdatepicker

Revamp selected bootstrap attribute

Imagine a scenario where there is: @media (min-width: 576px) { #projects-edit-middle-column .equal-columns-wrapper .equal-columns { width: 50%; padding-right: 25px; } } This is being utilized within a container: <div class="equal-columns ...

csstwitter-bootstrap

Modifying Bootstrap 5 color themes does not affect the button color classes

After following the steps outlined in this guide, I successfully customized the default colors of Bootstrap 5 in my React application created using create-react-app. Within my /src/scss/custom.scss file, I can easily utilize any newly defined variables and ...

cssreactjstwitter-bootstrapreact-bootstrapbootstrap-5

Looking for assistance with a straightforward CSS opacity fix for Internet Explorer

Take a look at this page comparison between chrome and IE. On the right side, you'll notice drop down fields. While Chrome displays them correctly, IE shows rectangular boxes instead. To fix this issue, I added opacity to the select fields with the ...

cssopacity

Forward the value of the selected radio button

Currently, I am focusing on this code snippet. <html> <script> var submit = document.getElementById('btnFormSubmit'); submit.addEventListener('click', submitForm); function submitForm(event){ event.preventDefault(); event. ...

javascripthtml

Enhance the clarity of content within an IFrame by sharpening the focus on

I recently developed an iframe to open a chat site I built using React.js and Tailwind. The iframe is loaded dynamically on the website through javascript. However, I noticed that when I click on the input field inside the iframe, the content appears blurr ...

javascripthtmlreactjsiframewidget

Experience full-screen viewing by double-clicking without the distraction of video controls (WordPress/HTML5)

I've been tasked with creating a video thumbnail that, when clicked, will lead the user to a new page where a single autoplaying and looping mp4 video will be shown. The issue arises when I can't interact with the video because the controls are h ...

htmlcsswordpressvideo

Python-selenium combo not being acknowledged in any text zones

I have been developing a bot that performs tasks automatically. However, in order to enter the result, I need access to this specific text zone: <input type="text" class="input3p ng-pristine ng-valid needsclick input3p-focused ng-touc ...

pythonhtmlselenium

Is it possible to center align the footer navbar components in Twitter Bootstrap?

Is there a way to center align all components according to the body page? Here is my code: <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional ...

htmlcsstwitter-bootstrap

Button in Angular CLI not triggering method on click event

After running the phpStorm Angular CLI project, I encountered an issue with adding a button and assigning a listener to it for the click event. Despite researching extensively and even referencing code from the official Angular documentation, the button do ...

htmlangulartypescript

Passing JSON information from a website to a Node.js server

<script type="text/javascript" src="data.json"></script> var mydata = JSON.parse(data); data = '[{"yer" : "Besiktas", "lat" : "41.044161", "lng" : "29.001056"},{"yer" : "Eminönü", "lat" : "41.017513", "lng" : "28.970939"},{"yer" : "Zeyt ...

javascripthtmljsonnode.js

What is the best way to navigate back to the field where the form validation has not passed successfully?

Currently, I am in the process of creating a registration form that includes validation. When a field fails the validation test (e.g. if the first name is left blank), an alert is triggered. However, the issue arises when alerts for all empty fields are di ...

javascriptjqueryhtmlbootstrap-4