j3ssi3ftw j3ssi3ftw - 4 months ago 23
CSS Question

cant set margin and padding to 0

im building a tic-tac-toe game and the board ive drawn with css keeps moving on my insert of an 'X' as if the 'X' has a margin property. I've set all margin and padding to 0 or none and it moves my board every time one is inserted.

html code:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
$(document).ready(function(){
$(".sq").click(function(){
$(this).html("<em class='x'>X</em>");
});
});
</script>

</head>
<body>
<center>
<div id="gameboard">
<div class="sq" id="top-left"></div>
<div class="sq" id="top-mid"></div>
<div class="sq" id="top-right"></div>
<div class="sq" id="mid-left"></div>
<div class="sq" id="mid-mid"></div>
<div class="sq" id="mid-right"></div>
<div class="sq" id="bot-left"></div>
<div class="sq" id="bot-mid"></div>
<div class="sq" id="bot-right"></div>
</div>
</center>

</body>
</html>


heres the css file:

div {
position: static;
}

#gameboard {
width: 900px;
}

#top-left {
border-bottom: 1px solid black;
border-right: 1px solid black;
}

#top-mid {

border-bottom: 1px solid black;
border-right: 1px solid black;
}

#top-right {

border-bottom: 1px solid black;
}

#mid-left {

border-bottom: 1px solid black;
border-right: 1px solid black;
}

#mid-mid {

border-bottom: 1px solid black;
border-right: 1px solid black;
}

#mid-right {

border-bottom: 1px solid black;
}

#bot-left {

border-right: 1px solid black;
}

#bot-mid {

border-right: 1px solid black;
}

#bot-right {

}

.sq {
padding: none;
margin: -5px;
display: inline-block;
width: 300px;
height: 250px;
}

.x {
padding: 0;
margin: none;
font-size: 150px;
}

.o {
padding: 0;
margin: 0;
font-size: 200px;
}

Answer

You just have to add position:absolute to <em> element (in this case x);

div {
    position: static;
}

#gameboard {
    width: 900px;
}

#top-left {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

#top-mid {

    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

#top-right {

    border-bottom: 1px solid black;
}

#mid-left {

    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

#mid-mid {

    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

#mid-right {

    border-bottom: 1px solid black;
}

#bot-left {

    border-right: 1px solid black;
}

#bot-mid {

    border-right: 1px solid black;
}

#bot-right {

}

.sq {
    padding: none;
    margin: -5px;
    display: inline-block;
    width: 300px;
    height: 250px;
}

.x {
    padding: 0;
    margin: none;
    font-size: 150px;
    position: absolute;
}

.o {
    padding: 0;
    margin: 0;
    font-size: 200px;
}
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
    $(document).ready(function(){
    $(".sq").click(function(){
        $(this).html("<em class='x'>X</em>");
    });
});
    </script>

</head>
<body>
<center>
    <div id="gameboard">
            <div class="sq" id="top-left"></div>
            <div class="sq" id="top-mid"></div>
            <div class="sq" id="top-right"></div>
            <div class="sq" id="mid-left"></div>
            <div class="sq" id="mid-mid"></div>
            <div class="sq" id="mid-right"></div>
            <div class="sq" id="bot-left"></div>
            <div class="sq" id="bot-mid"></div>
            <div class="sq" id="bot-right"></div>
    </div>
</center>

</body>
</html>